AJAX 是什么

AJAX（Asynchronous JavaScript and XML），指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。

AJAX 的步骤

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 服务器返回 XML 格式的字符串
4. JS 解析 XML，并更新局部页面

不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 [JSON]

先上代码

基础代码

const request = new XMLHttpRequest()
request.open('get', 'https://api.apihubs.cn/holiday/get');
request.onreadystatechange = function () { 
    // 4代表下载完成
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304 ) {
        // 成功的callback
      }else{
        // 失败的callback
      }
    }
}
request.send();

稍加封装

const ajax = (method, url, data, success, fail) => {
  const request = new XMLHttpRequest()
  request.open(method, url);
  request.onreadystatechange = function () { 
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304 ) {
        success(request)
      }else{
        fail(request)
      }
    }
  }
  request.send(data);
}
function successCallback(data){
    console.log("suceessData:",data)
}
function failCallback(data){
    console.log("failData:",data)
}
//操作示例
ajax('get','https://api.apihubs.cn/holiday/get',{},successCallback,failCallback)

属性参考（如有需要）

XMLHttpRequest 的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。

XMLHttpRequest.status

XMLHttpRequest.status 属性返回一个整数，表示服务器回应的 HTTP 状态码。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange 属性指向一个监听函数。readystatechange 事件发生时（实例的 readyState 属性变化），就会执行这个属性。

XMLHttpRequest.responseText

XMLHttpRequest.responseText 属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

XMLHttpRequest 的实例方法

XMLHttpRequest.open()

XMLHttpRequest.open 方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。

它一共可以接受五个参数：

• method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等
• url: 表示请求发送目标 URL
• async（可选）: 布尔值，表示请求是否为异步，默认为 true。如果设为 false，则 send() 方法只有等到收到服务器返回了结果，才会进行下一步操作。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。
• user（可选）：表示用于认证的用户名，默认为空字符串
• password（可选）：表示用于认证的密码，默认为空字符串

注意：再次使用 open()，等同于调用 abort()。

XMLHttpRequest.send()

XMLHttpRequest.send 方法用于实际发出 HTTP 请求。

它的参数是可选的：

• 如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求
• 如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求

GET 请求：

const request = new XMLHttpRequest()
request.open('get', url);
request.onreadystatechange = function () { 
 ....
})
request.send();

POST 请求：

const request = new XMLHttpRequest()
request.open('post', url);
request.onreadystatechange = function () { 
 ....
})
request.send({
    key: 'value',
});

XMLHttpRequest.setRequestHeader()

XMLHttpRequest.setRequestHeader 方法用于设置浏览器发送的 HTTP 请求的头信息。

该方法必须在open()之后、send()之前调用。

该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。

**

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
xhr.send(JSON.stringify(data));

XMLHttpRequest.getResponseHeader()

XMLHttpRequest.getResponseHeader 方法返回 HTTP 头信息指定字段的值。

XMLHttpRequest.getAllResponseHeaders()

XMLHttpRequest.getAllResponseHeaders 方法返回一个字符串，表示服务器发来的所有 HTTP 头信息。

格式为字符串，每个头信息之间使用 CRLF 分隔（回车+换行），如果没有收到服务器回应，该属性为 null。如果发生网络错误，该属性为空字符串。