ajax原理

大家好，今天来和大家谈谈有关ajax的一些事情。要想更好的使用ajax，首先我们要对ajax原理有一定的了解，接下来就带大家一起熟悉一下ajax原理。

ajax的概念

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
也就是说ajax是我们客户端给服务端发送消息的?具，以及接受响应的?具接。下面我们来说一下使用ajax的一些好处。

AJAX 的优势

1. 不需要插件的?持，原? js 就可以使?
2. ?户体验好（不需要刷新??就可以更新数据）

3. 减轻服务端和带宽的负担
   ajax既然这么好用，那它有什么缺点吗？当然有，ajax的缺点就是：
   搜索引擎的?持度不够，因为数据都不在??上，搜索引擎搜索不到。
   
   了解了有关ajax的信息之后，就来尝试创建一个ajax对象吧！

   AJAX 的使?

   在 js 中有内置的构造函数来创建 ajax 对象
   创建 ajax 对象以后，我们就使? ajax 对象的?法去发送请求和接受响应
   创建?个 ajax 对象

        // IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
    

上?就是有了?个 ajax 对象
我们就可以使?这个 xhr 对象来发送 ajax 请求了
创建完对象之后我们还需要设置一些信息：

        const xhr = new XMLHttpRequest()
// xhr 对象中的 open ?法是来配置请求信息的
// 第?个参数是本次请求的请求?式 get / post / put / ...
// 第?个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求?式', '请求地址', 是否异步)
xhr.open('get', './data.php')
    

上?的代码执?完毕以后，本次请求的基本配置信息就写完了
接下来就是把它发送出去啦！

使? ajax 发送请求

ajax的请求有两种方式：get和post：

get

        const xhr = new XMLHttpRequest()
// 直接在地址后?加?个 ?，然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')
xhr.send()
    

post

        const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 如果是? ajax 对象发送 post 请求，必须要先设置?下请求头中的 contenttype
// 告诉?下服务端我给你的是?个什么样?的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-formurlencoded')
// 请求体直接再 send 的时候写在 () ??就?
// 不需要问号，直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')
    

总结：
ajax提供前后台交互的能?
是?个 默认异步 执?机制的功能
GET请求的差数直接拼接在url上面
POST请求的参数就不是放在url了

以上就是有关ajax的一些基础信息啦，如果想更好的学习有关ajax的知识，这里有一份教学视频哦：https://www.bilibili.com/video/av78185809

--逆战班

原文：https://www.cnblogs.com/qazxswedc/p/12444292.html