所谓神秘的 XMLHttpRequest 对象

Question

在 1999 年，微软发布 IE5，第一次引入了新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这功能在当时并没有被引起注意，直到 2004 年 Gmail 和 2005 年 Google Map 的发布，才引起广泛的重视。在 2005 年 2 月，Ajax （Asynchronous JavaScript And XML，中文翻译是：异步的 JavaScript 和 XML ）这词第一次提出，指围绕这个功能进行开发的一整套做法。此后，Ajax 成为脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。

什么是 XHR 对象

XHR 是 XMLHttpRequest 的简称。这是微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。

一、创建 XHR

IE5是第一款引入 XHR 对象的浏览器， 在 IE5中， XHR 对象是通过 MSXML 库中的一个 ActiveX 对象实现的，而 IE7+ 及其他标准浏览器都支持原生的 XHR 对象。

let xhr
if (window.XMLHttpRequest) {
  xhr = new window.XMLHttpRequest()
} else {
  // IE5, IE6
  xhr = new ActiveXObject('Microsort.XMLHTTP')
}

注意：如果要建立 N 个不同的请求，就要使用 N 个不同的 XHR 对象。当然可以重用已存在的 XHR 对象，但这会终止之前通过该对象挂起的任何请求。

二、发送请求

发送请求的过程，包括 open 和 send 两个方法。

open

在使用 XHR 对象时，要调用的第一个方法是 open() ，该方法接收 3 个参数；

// xhr.open(method, url, async)
xhr.open('GET', 'example.php', false)

• method：即指定发送请求的方式，字符串类型，不区分大小写，但通常使用大写字母。如 GET、POST。还可以是 HEAD、OPTIONS、PUT。而由于安全风险的原因，CONNECT、TRACE、TRACK 被禁止使用。（ 关于HTTP协议8种常用方法的详细介绍，可以点击这里）
• url：所要请求 URL，该 URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的 URL 发送请求。如果 URL 与启动请求的页面有任何差别，都会引发安全错误。
• async：表示是否异步发送请求，布尔类型（true 表示异步，false 表示同步）。如果不填写，默认 true，表示异步发送。
• 如果请求一个受密码保护的 URL，把用于认证的用户名和密码作为第 4 个和 第 5 个参数传递给 open() 方法。

如果接收的是同步响应，则需要将 open() 方法的第三个参数设置为 false，那么 send() 方法将阻塞直到请求完成。

同步请求是吸引人的，但应该避免使用它们。客户端 JavaScript 是单线程的，当 send() 方法阻塞时，他通常会导致整个页面冻结。如果连接的服务器响应慢，那么用户的浏览器看起来像“假死”状态。

send

send() 方法接收一个参数，即要作为请求主体发送的数据。调用 send() 方法后，请求被分派到服务器。

• 如果 GET 请求， send() 方法无参数，或者参数为 null；
• 如果 POST 请求，send() 方法参数为要发送的数据，字符串类型，所以一般需要序列化。

xhr.open('GET', 'example.php', false)
xhr.send(null)

三、接收响应

一个完整的 HTTP 响应由状态码、响应头集合、响应主体组成。在收到响应后，这些都可以通过 XHR 对象的属性和方法使用，主要有以下 4 个属性：

• responseText：作为响应主体被返回的文本（文本形式）；
• responseXML：如果响应的内容是 text/xml 或 application/xml，这个属性中将保存这响应数据的 XML DOM 文档（document 形式）
• status：HTTP 状态码（数字形式）
• statusText：HTTP 状态说明（文本形式）

在接收到响应之后，第一步是检测 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP状态码为 200 作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下， responseXML 也可以访问了。此外，状态码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中的缓存版本。当然，也意味着响应是有效的。

无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中，而对于非 XML 数据而已，responseXML 属性的值将为 null。

// 这是同步的方式，（异步则需要监听 onreadystatechange 事件，继续往下看）
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  alert(xhr.responseText)
} else {
  alert('request was unsuccessful: ' + xhr.status)
}

四、readyState

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XHR 对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XHR 的状态信息。
readyState 存有 XHR 的状态，从 0 到 4 发生变化。

• 0 （Uninitialized 未初始化）：请求未初始化（此阶段确认XMLHttpRequest对象是否创建，还没有调用 open() 方法）
• 1（Loading 载入）：服务器连接已建立（此阶段调用 open() 方法进行初始化，并调用 send() 方法向服务端发送请求）
• 2（Loaded 载入完成）：请求已接收（此阶段 send() 方法执行完成，且已接收到服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用）
• 3（Interactive 交互）：请求处理中（此阶段解析接收到的服务器端响应数据，即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过 responseBody，responseText 或 responseXML 的属性存取的格式）
• 4（Completed 完成）：请求已完成，且响应已就绪（此阶段响应内容解析完成，可以在客户端调用了）

// 异步方式
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert('request was successful!')
  }
}

注意：理论上，只要 readyState 属性值发生改变，都会触发一次 onreadystatechange 事件。但是为了确保跨浏览器的兼容性，必须在调用 open() 之前指定 onreadystatechange 事件处理程序，否则将无法接收 readyState 属性为 0 和 1 的情况。

五、超时

XHR 对象的 timeout 属性等于一个整数，单位毫秒（ms），表示该请求的最大请求时间。即在多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认为 0，表示没有时间限制。

如果请求超时，将会触发 ontimeout 事件。

xhr.open('POST', 'example.php', true)
xhr.ontimeout = function () {
  console.log('The request timed out')
}
xhr.timeout = 1000
xhr.send()

IE8 浏览器不支持该属性。

六、最后

只要弄清楚了整个过程，就会发现其实它并没有那么神秘，对吧。
概而括之，整个 XHR 对象的生命周期应该包括如下阶段：创建 → 初始化请求 → 发送请求 → 接收数据 → 解析数据 → 完成。

// 整个过程
function httpRequest() {
  let xhr

  // 创建 xhr 对象
  if (window.XMLHttpRequest) {
    xhr = new window.XMLHttpRequest()
  } else {
    // 为了兼容 IE5、IE6
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }

  // 异步方式必须采用 onreadystatechange 来监听
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('The request was successful! ' + xhr.responseText)
      // handle statements...
    }
  }

  // 设置超时处理
  xhr.ontimeout = function () {
    alert('The request was timed out')
  }
  xhr.timeout = 3000

  xhr.open('POST', './test.ajax', true)

  // 如需设置 HTTP 请求头，必须在 open() 之后、send() 之前调用，例如：
  // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');

  // 序列化
  xhr.send(JSON.stringify({ name: 'test' }))
}

httpRequest()

参考文章

• 深入理解 Ajax 系列第一篇之 XHR 对象
• MDN web docs 之 XMLHttpRequest

过程中遇到的一些问题

• 关于 chrome 控制台警告：Synchronous XMLHttpRequest on the main thread 终极解决办法