一、所谓“神秘”的 XMLHttpRequest 对象

背景

在 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()

下一篇：HTTP Content-Type详解

参考文章

过程中遇到的一些问题

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

The end.

toFrankie / blog