javascript基础从小白到高手系列一千六百五十七：网络请求与远程资源

本章内容
 使用XMLHttpRequest 对象
 处理XMLHttpRequest 事件
 源域Ajax 限制
 Fetch API
 Streams API
2005 年，Jesse James Garrett 撰写了一篇文章，“Ajax—A New Approach to Web Applications”。这篇
文章中描绘了一个被他称作Ajax（Asynchronous JavaScript+XML，即异步JavaScript 加XML）的技术。
这个技术涉及发送服务器请求额外数据而不刷新页面，从而实现更好的用户体验。Garrett 解释了这个技
术怎样改变自Web 诞生以来就一直延续的传统单击等待的模式。
把Ajax 推到历史舞台上的关键技术是XMLHttpRequest（XHR）对象。这个对象最早由微软发明，
然后被其他浏览器所借鉴。在XHR 出现之前，Ajax 风格的通信必须通过一些黑科技实现，主要是使用
隐藏的窗格或内嵌窗格。XHR 为发送服务器请求和获取响应提供了合理的接口。这个接口可以实现异
步从服务器获取额外数据，意味着用户点击不用页面刷新也可以获取数据。通过XHR 对象获取数据后，
可以使用DOM 方法把数据插入网页。虽然Ajax 这个名称中包含XML，但实际上Ajax 通信与数据格式
无关。这个技术主要是可以实现在不刷新页面的情况下从服务器获取数据，格式并不一定是XML。
实际上，Garrett 所称的这种Ajax 技术已经出现很长时间了。在Garrett 那篇文章之前，一般称这种
技术为远程脚本。这种浏览器与服务器的通信早在1998 年就通过不同方式实现了。最初，JavaScript 对
服务器的请求可以通过中介（如Java 小程序或Flash 影片）来发送。后来XHR 对象又为开发者提供了
原生的浏览器通信能力，减少了实现这个目的的工作量。
XHR 对象的API 被普遍认为比较难用，而Fetch API 自从诞生以后就迅速成为了XHR 更现代的替代
标准。Fetch API 支持期约（promise）和服务线程（service worker），已经成为极其强大的Web 开发工具。
XMLHttpRequest 对象
IE5 是第一个引入XHR 对象的浏览器。这个对象是通过ActiveX 对象实现并包含在MSXML 库中
的。为此，XHR 对象的3 个版本在浏览器中分别被暴露为MSXML2.XMLHttp、MSXML2.XMLHttp.3.0
和MXSML2.XMLHttp.6.0。
所有现代浏览器都通过XMLHttpRequest 构造函数原生支持XHR 对象：
let xhr = new XMLHttpRequest();
使用XHR
使用XHR 对象首先要调用open()方法，这个方法接收3 个参数：请求类型（“get”、“post"等）、
请求URL，以及表示请求是否异步的布尔值。下面是一个例子：
xhr.open(“get”, “example.php”, false);
这行代码就可以向example.php 发送一个同步的GET 请求。关于这行代码需要说明几点。首先，这
里的URL 是相对于代码所在页面的，当然也可以使用绝对URL。其次，调用open()不会实际发送请
求，只是为发送请求做好准备。
要发送定义好的请求，必须像下面这样调用send()方法：
xhr.open(“get”, “example.txt”, false);
xhr.send(null);
send()方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传null，
因为这个参数在某些浏览器中是必需的。调用send()之后，请求就会发送到服务器。
因为这个请求是同步的，所以JavaScript 代码会等待服务器响应之后再继续执行。收到响应后，XHR
对象的以下属性会被填充上数据。
 responseText：作为响应体返回的文本。
 responseXML：如果响应的内容类型是"text/xml"或"application/xml”，那就是包含响应
数据的XML DOM 文档。
 status：响应的HTTP 状态。
 statusText：响应的HTTP 状态描述。
收到响应后，第一步要检查status 属性以确保响应成功返回。一般来说，HTTP 状态码为2xx 表
示成功。此时，responseText 或responseXML（如果内容类型正确）属性中会有内容。如果HTTP
状态码是304，则表示资源未修改过，是从浏览器缓存中直接拿取的。当然这也意味着响应有效。为确
保收到正确的响应，应该检查这些状态，如下所示：
xhr.open(“get”, “example.txt”, false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
以上代码可能显示服务器返回的内容，也可能显示错误消息，取决于HTTP 响应的状态码。为确定
下一步该执行什么操作，最好检查status 而不是statusText 属性，因为后者已经被证明在跨浏览器
的情况下不可靠。无论是什么响应内容类型，responseText 属性始终会保存响应体，而responseXML则对于非XML 数据是null。
虽然可以像前面的例子一样发送同步请求，但多数情况下最好使用异步请求，这样可以不阻塞
JavaScript 代码继续执行。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);
以上代码使用DOM Level 0 风格为XHR 对象添加了事件处理程序，因为并不是所有浏览器都支持
DOM Level 2 风格。与其他事件处理程序不同，onreadystatechange 事件处理程序不会收到event
对象。在事件处理程序中，必须使用XHR 对象本身来确定接下来该做什么。
在收到响应之前如果想取消异步请求，可以调用abort()方法：
xhr.abort();
调用这个方法后，XHR 对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中
断请求后，应该取消对XHR 对象的引用。由于内存问题，不推荐重用XHR 对象。