原生 JS 实现 Ajax 异步请求

Ajax 是 (Asynchronous JavaScript and Xml) 的缩写，是一种允许浏览器与服务器通信而无须刷新当前页面的技术。说到 Ajax 就不得不说同步请求和异步请求了。

同步：指发送方发出数据后，等待接收方发回响应以后才发下一个数据包的通讯方式。

异步：指发送方发出数据后，不等接收方发回响应，接着发送下一个数据包的通讯方式。

可以简单理解为：

同步请求：你现在发送请求，我要等你请求完成，才去做别的事。

异步请求：你发送你的请求，我去做我的事了，请求完成后告诉我一声。

创建 XMLHttpRequest 对象
1
var xhr = new XMLHttpRequest()
发起一个 HTTP 请求，还未发送请求到服务器端，其中 open 函数有三个参数：
- method: get/post
- url: 请求地址
- async：true/false ，可省略，默认为 true 表示发送异步请求， false 表示发送同步请求
  1
  xhr.open('get', './index/data.json')

如果采用 post 请求，必须设置请求头

1	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

readystatechange 事件会在 readyState 属性改变时触发，监控 readyState 属性变化：

0 –> UNSENT(未打开) –> open() 方法还未被调用
1 –> OPENED(未发送) –> send() 方法还未被调用
2 –> HEADERS_RECEIVED(已获取响应头) –> send() 方法已经被调用，响应头和响应状态已经返回
3 –> LOADING(正在下载响应体) –> 响应体下载中； responseText 中已经获取了部分数据

4 –> DONE(请求完成) –> 整个请求过程已经完毕

xhr.onreadystatechange = function () {
    // 请求生命周期已结束，状态码 4 表示请求已完成，进一步判断成功与否，做相应的处理
    if (xhr.readyState === 4) {
        // 请求成功，200~300之间是成功，304表示请求资源没有被修改，可以使用浏览器缓存，也算成功
        if ((xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // 服务器返回的一般是 json 对象，使用 JSON.parse() 格式化为 js 对象
            var data = JSON.parse(xhr.responseText)
            if (data.success) {
                // 处理响应成功返回的数据
            } else {
                // 处理响应失败返回的数据
            }
        } else {
            // 处理请求失败返回的数据
        })
    }
}

发送请求
- xhr.send() 最好放在 readystatechange 事件监听后面，因为如果使用同步请求，会在 send 发送请求时等待返回结果后再进行下一步动作，不会执行 onreadystatechange 函数，无法结束请求声明周期。 Ajax 请求永远停留在 xhr.send() 阶段。
- 如果是 get 请求，直接在 url 后面添加查询字符串传递参数
- 如果是 post 请求，则通过 send 传递参数
  1
  2
  3
  4
  5
  // get
  xhr.send()
  // post
  var data = '同步请求'
  xhr.send(data)

前后端交互约定，约定何种状态码表示响应成功，比如约定 success 为 true 或者 false 时返回不同的信息，通过 success 属性可以方便前端调用返回的信息。

// 响应成功
{
    "success": true,
    "msg": "xxx",
}
// 响应失败
{
"success": false,
"msg":  "请求数据不存在"
}