XMLHttpRequest详解

XMLHttpRequest是做什么的

使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。
发送一个 HTTP 请求，需要创建一个 XMLHttpRequest 对象，打开一个 URL，最后发送请求。当所有这些事务完成后，该对象将会包含一些诸如响应主体或 HTTP status 的有用信息。

XMLHttpRequest()构造初始化方法：

一个XMLHttpRequest对象。必须在调用其他方法前调用构造方法。

if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest() // ie7+等现代浏览器
} else if (window.ActiveXObject) { // ie5/6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP')
}

XMLHttpRequest.open()

初始化一个请求。

xhr.open(method, url, async, user, password);

method：要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
async: 可选，默认为true，表示要不要异步执行操作。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。
user/password: 可选，可选的用户名用于认证用途；默认为null。

XMLHttpRequest.setRequestHeader()

设置HTTP请求头部的方法。此方法必须在 open()方法和 send() 之间调用。

XMLHttpRequest.onreadystatechange

会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

XMLHttpRequest.readyState

属性返回一个 XMLHttpRequest  代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。请求初始化
1	OPENED	open() 方法已经被调用。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部， 可以调用 send() 方法来发起请求。服务器连接已建立
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。请求已接收
3	LOADING	下载中； responseText 属性已经包含部分数据。响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据。请求处理中
4	DONE	下载操作已完成。请求操作已经完成。这意味着数据传输已经彻底完成或失败。

在IE中，状态有着不同的名称，并不是 UNSENT，OPENED ， HEADERS_RECEIVED ， LOADING 和 DONE, 而是 READYSTATE_UNINITIALIZED (0)，READYSTATE_LOADING (1) ， READYSTATE_LOADED (2) ， READYSTATE_INTERACTIVE (3) 和 READYSTATE_COMPLETE (4) 。

xhr.onreadystatechange = function () { // 状态码会从0 - 4
    console.log('READYSTATE' + xhr.readyState)
    if (this.status == 200 && this.readyState == 4) {
        console.log(this.responseText)
    } else if (this.status == 404) {
        console.log('网页不存在')
    }
}

XMLHttpRequest.status

返回了XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型，http状态码。在请求完成前，status的值为0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0。

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.status);

xhr.open('GET', '/server', true);
console.log('OPENED', xhr.status);

xhr.onprogress = function () {
  console.log('LOADING', xhr.status);
};

xhr.onload = function () {
  console.log('DONE', xhr.status);
};

xhr.send(null);

/**
 * 输出如下：
 *
 * UNSENT（未发送） 0
 * OPENED（已打开） 0
 * LOADING（载入中） 200
 * DONE（完成） 200
 */

XMLHttpRequest.statusText

只读属性 XMLHttpRequest.statusText 返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息，这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码XMLHTTPRequest.status，这个属性包含了返回状态对应的文本信息，例如"OK"或是"Not Found"。如果请求的状态readyState的值为"UNSENT"或者"OPENED"，则这个属性的值将会是一个空字符串。如果服务器未明确指定一个状态文本信息，则statusText的值将会被自动赋值为"OK"。

XMLHttpRequest.responseType

属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
responseType 要在调用 open() 初始化请求之后调用， 并且要在调用 send() 发送请求到服务器之前调用。
如果请求尚未完成或未成功，则取值是 null 。例外的，读取文本数据时如果将 responseType 的值设置成"text"或空字符串（""）且当请求状态还在是 LOADING readyState (3) 时，response 包含到目前为止该请求已经取得的内容。

XMLHttpRequest.response

返回响应的正文。返回的类型可以是 ArrayBuffer 、 Blob 、 Document 、 JavaScript Object 或 DOMString 。 这取决于 responseType 属性。

response与responseType支持以下几种值：

值	描述
""	将 responseType 设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。
"arraybuffer"	response 是一个包含二进制数据的 JavaScript ArrayBuffer 。
"blob"	response 是一个包含二进制数据的 Blob 对象 。
"document"	response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。
"json"	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
"text"	response 是包含在 DOMString 对象中的文本。

XMLHttpRequest.responseText

在一个请求被发送后，从服务器端返回文本。

• DOMString 是XMLHttpRequest 返回的纯文本的值。当DOMString 为null时，表示请求失败了。当DOMString 为""时，表示这个请求还没有被send()
• 当处理一个异步request的时候，尽管当前请求并没有结束，responseText的返回值是当前从后端收到的内容。
• 当请求状态readyState变为XMLHttpRequest.DONE (4)，且status值为200（"OK"）时，responseText是全部后端的返回数据

XMLHttpRequest.responseURL

返回响应的序列化URL，如果URL为空则返回空字符串。如果URL有锚点，则位于URL # 后面的内容会被删除。如果URL有重定向， responseURL的值会是经过多次重定向后的最终 URL 。

XMLHttpRequest.ontimeout

代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 document environment 中的同步 XMLHttpRequests  请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置。不能在拥有的window中，给同步请求使用超时。

xhr.timeout = 2000; // 超时时间，单位是毫秒

xhr.onload = function () {
  // 请求完成。在此进行处理。
};

xhr.ontimeout = function (e) {
  // XMLHttpRequest 超时。在此做某事。
};

XMLHttpRequest.onload

表示请求已完成，readyState状态码只能等于4

xhr.onload = function () {
    console.log('READYSTATE' + xhr.readyState)
    // READYSTATE1
    // READYSTATE4
}

XMLHttpRequest.onprogress

表示请求正在处理中，可显示进度条等信息

xhr.onprogress = function () {
    console.log('测试加载状态READYSTATE' + xhr.readyState)
    // 测试加载状态READYSTATE3
}

XMLHttpRequest.send()

用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
主要用于post请求传递参数，get请求直接在url后拼接参数即可。