网络请求基础——XML对象发送请求【红宝书第四版P711-P713】

1. Ajax【Asynchronous JavaScript and XML】 在不刷新页面的前提下，实现请求数据。实现 Ajax 的关键对象是 XHR【XMLHttpRequest】。在早期，Ajax 被称作 远程脚本。

现在 XHR 对象的 API 实际上已经过时，一般采用 Fetch API，其支持期约 Promise 以及 服务线程 service worker.

2. XHR 对象介绍：

【1】一般首先利用 XMLHttpRequest 构造函数声明一个实例：

let xhr = new XMLHttpRequest();

【2】xhr.open() 方法，接收三个参数，分别为 请求类型【"GET", "POST"】、请求URL 、是否发送异步请求，举例：

xhr.open("get", "example.php", false);

以上一行代码准备向 example.php 发送了一个同步的 GET 请求。

注意，open() 方法不会实际发送请求，只是为发送请求做好准备，真正发送请求使用的是 xhr.send() 方法.

【3】xhr.send(null)，send 方法接收一个参数，会被当做请求体的数据发送，如果不需要发送请求体，则必须传一个 null，因为这个参数在某些浏览器中是必须的，这个请求是同步的，因此需要等待服务器响应后继续执行。当得到服务器的结果后， xhr 对象的某些属性会被填充响应的数据：

（1）xhr.responseText：作为响应体返回的文本【重点】

（2）xhr.responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档

（3）xhr.status：响应 HTTP 的状态【重点】

（4）xhr.statusText：响应的 HTTP 的状态描述

注意：收到响应后，需要先检查 xhr.status 属性以确保成功返回。如果 xhr.status 状态码为 2xx 说明请求成功，如果是 304 则表示直接从浏览器缓存中取数据，也算成功.

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  alert(xhr.responseText);
} else {
  alert("Request was unsuccessful: " + xhr.status);
}

那么为何不使用 xhr.statusText 检查呢？在跨浏览器的请求中，xhr.statusText 不可靠.

【4】xhr 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段：

※ 0：未初始化（Uninitialized）。尚未调用 open()方法。
※ 1：已打开（Open）。已调用 open()方法，尚未调用 send()方法。
※ 2：已发送（Sent）。已调用 send()方法，尚未收到响应。
※ 3：接收中（Receiving）。已经收到部分响应。
※ 4：完成（Complete）。已经收到所有响应，可以使用了。

每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。可以借此机会检查 readyState 的值。一般来说，我们唯一关心的 readyState 值是 4，表示数据已就绪。为保证跨浏览器兼容，onreadystatechange 事件处理程序应该在调用 open()之前赋值。

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

【5】在收到响应之前如果想取消异步请求，可以调用 abort()方法：
xhr.abort();
调用这个方法后，XHR 对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中
断请求后，应该取消对 XHR 对象的引用。由于内存问题，不推荐重用 XHR 对象。