XMLHttpRequest

1.1 什么是 XMLHttpRequest

  XMLHttpRequest(XHR) 对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。XMLHttpRequest 可以用于获取任何类型的数据，不仅仅是 XML，还可以获取 JSON 或者纯文本。它甚至支持 HTTP 以外的协议(包括 file:// 和 FTP)，但可能受到出于安全等原因的限制。

1.2 XMLHttpRequest 说明

1.2.1 XMLHttpRequest 相关属性

☞ readyState   HTTP 请求的状态，当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。5 个状态中每一个都有一个相关联的非正式的名称，readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

☞ status   由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

☞ statusText   这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 “OK”，当状态为 404 的时候它是 “Not Found”。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

☞ response   该属性只读表示服务器返回的数据体，可能是任意的数据类型，比如字符串，对象，二进制对象等，具体类型由responseType 属性决定。如果本次请求没有成功或者数据不完整，该属性等于 null

☞ responseText   目前为止为服务器接收到的响应体(不包括头部)，或者如果还没有接收到数据的话，就是空字符串。如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，默认使用 Unicode UTF-8。

☞ responseXML   对请求的响应，解析为 XML 并作为 Document 对象返回。

☞ responseType   表示服务器返回数据的类型，这个属性是可写的，在 open 之后，send 之前，告诉服务器返回指定类型的数据。如果 responseType 设为空字符串，就等同于默认值 text 表示服务器返回文本数据；arraybuffer 表示服务器返回二进制数组；blob 表示返回二进制对象；document 返回一个文档对象；json 返回json对象，浏览器自动对返回数据调用 JSON.parse() 方法

☞ onreadystatechange 每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。

1.2.2 XMLHttpRequest 相关方法

1.2.3 XMLHttpRequest 的使用

☞ 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

☞ 初始化 HTTP 请求参数

xhr.open(method, url, async, username, password)

  这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后)以及当 readyState 为 4 时(已经接收响应时)，调用这个方法是安全的。当针对任何其他状态调用的时候，open() 方法的行为是为指定的。   除了保存供 send() 方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open() 方法没有其他的行为。要特别注意，当这个方法调用的时候，实现通常不会打开一个到 Web 服务器的网络连接。

参数说明  ① method 参数是用于请求的 HTTP 方法。值包括 GET、POST。  ② url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。  ③ async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。  ④ username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

☞ 发送一个 HTTP 请求

xhr.send();

  这个方法导致一个 HTTP 请求发送。如果之前没有调用 open()，或者更具体地说，如果 readyState 不是 1，send() 抛出一个异常。否则，它发送一个 HTTP 请求，该请求由以下几部分组成：  ♞ 之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格(如果有的话)。  ♞ 之前调用 setRequestHeader() 时指定的请求头部(如果有的话)。  ♞ 传递给这个方法的 body 参数。 一旦请求发布了，send() 把 readyState 设置为 2，并触发 onreadystatechange 事件句柄。

☞ 监听函数

xhr.onload = function() {
	var responseText = xhr.responseText;
	console.log(responseText);
};

XMLHttpRequest 对象可以对以下事件指定监听函数。 XMLHttpRequest.onloadstart：loadstart 事件(HTTP 请求发出)的监听函数 XMLHttpRequest.onprogress：progress事件(正在发送和加载数据)的监听函数 XMLHttpRequest.onabort：abort 事件(请求中止，比如用户调用了abort() 方法)的监听函数 XMLHttpRequest.onerror：error 事件(请求失败)的监听函数 XMLHttpRequest.onload：load 事件(请求成功完成)的监听函数 XMLHttpRequest.ontimeout：timeout 事件(用户指定的时限超过了，请求还未完成)的监听函数 XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

1.3 示例

// 构造表单数据
var formData = new FormData();
formData.append('username', 'johndoe');
formData.append('id', 123456);

// 创建xhr对象 
var xhr = new XMLHttpRequest();

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 设置xhr请求的超时时间
xhr.timeout = 3000;
// 设置响应返回的数据格式
xhr.responseType = "text";

// 创建一个 post 请求
xhr.open('POST', '/server');

// 注册相关事件回调处理函数
xhr.onload = function(e) { 
  if(this.status == 200||this.status == 304){
      console.log(this.responseText);
  }
};
xhr.ontimeout = function(e) {
	console.log("请求超时");
};

// 发送数据
xhr.send(formData);