摘要：從請(qǐng)求開(kāi)始算起，若超過(guò)時(shí)間請(qǐng)求還沒(méi)有結(jié)束包括成功失敗，則會(huì)觸發(fā)事件，主動(dòng)結(jié)束該請(qǐng)求。在不限制超時(shí)的情況下，有可能同步請(qǐng)求一直處于狀態(tài)，服務(wù)端遲遲不返回響應(yīng)，這樣整個(gè)頁(yè)面就會(huì)一直阻塞，無(wú)法響應(yīng)用戶(hù)的其他交互。

這篇文章轉(zhuǎn)發(fā)自我之前的一篇博客,是看過(guò)《你真的會(huì)使用XMLHttpRequest嗎？》后結(jié)合自己之前對(duì)Ajax認(rèn)識(shí)的總結(jié)。

Ajax："Asynchronous JavaScript And XML"即異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，這項(xiàng)技術(shù)的核心是瀏覽器提供的XMLHttpRequest對(duì)象。

setRequestHeader必須寫(xiě)在open()方法之后，send()方法之前

獲取全部可獲?。ㄓ幸恍﹉eader是獲取不到的）的header字段

獲取指定header字段的值(只能獲取部分header的值)

通過(guò)設(shè)置xhr.response的類(lèi)型，是告訴瀏覽器或者xhr如何處理響應(yīng)數(shù)據(jù)(對(duì)響應(yīng)數(shù)據(jù)按照什么樣的格式去處理)

這個(gè)方法的作用就是重寫(xiě)response的MIME類(lèi)型

這個(gè)方法必須在send()方法之前進(jìn)行調(diào)用

可以通過(guò)這種方式，可以得到純文本格式的圖片內(nèi)容，獲取到數(shù)據(jù)后再使用相應(yīng)的編碼方法重新構(gòu)建圖片

var xhr = new XMLHtppRequest()
xhr.open("get", "text.php", true)
xhr.overrideMimeType("text/xml; charset=utf-8")
xhr.send();

根據(jù)上面的例子，將response的MIME類(lèi)型設(shè)置為了"text/xml",通過(guò)這樣的方式，xhr會(huì)將響應(yīng)當(dāng)做text或者xml來(lái)處理，通過(guò)xhr.response和xhr.responseText可以獲取到文本格式的相應(yīng)數(shù)據(jù)，通過(guò)xhr.responseXML可以獲取到XML格式(是一顆DOM樹(shù)/DOM對(duì)象)的數(shù)據(jù)

var xhr = new XMLHtppRequest()
xhr.open("get", "text.php", true)
xhr.overrideMimeType("text/plain; charset=utf-8")
xhr.send();

根據(jù)上面的例子，將response的MIME類(lèi)型設(shè)置為了"text/plain",通過(guò)這樣的方式，xhr會(huì)將相應(yīng)當(dāng)做text或者plain(純文本)來(lái)處理，通過(guò)xhr.response和xhr.responseText可以獲取到文本格式的相應(yīng)數(shù)據(jù)，通過(guò)xhr.responseXML獲取到的數(shù)據(jù)為null，即便數(shù)據(jù)是XML

responseType是XMLHttpRequest leve2中新增的屬性，用來(lái)指定xhr.response的數(shù)據(jù)類(lèi)型

var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/image.png", true);
//可以將`xhr.responseType`設(shè)置為`"blob"`也可以設(shè)置為`" arrayBuffer"`
//xhr.responseType = "arrayBuffer";
xhr.responseType = "blob";

xhr.onload = function(e) {
  if (this.status == 200) {
    // this.response就是Blob對(duì)象
    var blob = this.response;
    ...
  }
};

xhr.send();

xhr提供了3個(gè)屬性來(lái)獲取請(qǐng)求返回的數(shù)據(jù)，分別是：xhr.response, xhr.responseText, xhr.responseXML

xhr.response:

無(wú)論xhr.responseType的值是什么，只要請(qǐng)求完成，都可以從xhr.response中取到對(duì)應(yīng)的值

請(qǐng)求未完成時(shí)，xhr.response的值與xhr.responseType有關(guān)，xhr.responseType的值為""(默認(rèn)值)或者text時(shí)，xhr.response的值為"",否則為null

xhr.responseText:

只有當(dāng)responseType設(shè)置為""或者text時(shí)，才可以使用這個(gè)屬性獲取相應(yīng)內(nèi)容

請(qǐng)求未完成、失敗時(shí)，該值為空字符串

xhr.responseXML:

只有當(dāng) responseType 為""、document時(shí)，此時(shí)才能調(diào)用xhr.responseXML，否則拋錯(cuò)

請(qǐng)求未完成、失敗時(shí)，該值為null

用xhr.readyState屬性可以獲取ajax的狀態(tài)，每當(dāng)xhr.readyState的值發(fā)生變化時(shí)，就會(huì)觸發(fā)xhr.onreadystatechange事件，可以在這個(gè)事件中進(jìn)行相應(yīng)的操作

為了保證跨瀏覽器兼容性，必須在調(diào)用open()方法之前指定onreadystatechange事件處理程序

 xhr.onreadystatechange = function () {
    switch(xhr.readyState){
      case 1://OPENED
        //do something
            break;
      case 2://HEADERS_RECEIVED
        //do something
        break;
      case 3://LOADING
        //do something
        break;
      case 4://DONE
        //do something
         break;
    }

XMLHttpRequest提供了timeout屬性來(lái)允許設(shè)置請(qǐng)求的超時(shí)時(shí)間。

從請(qǐng)求開(kāi)始 算起，若超過(guò) timeout 時(shí)間請(qǐng)求還沒(méi)有結(jié)束（包括成功/失?。?，則會(huì)觸發(fā)ontimeout事件，主動(dòng)結(jié)束該請(qǐng)求。

請(qǐng)求開(kāi)始：xhr.onloadstart事件觸發(fā)的時(shí)候，也就是你調(diào)用xhr.send()方法的時(shí)候

請(qǐng)求結(jié)束：xhr.loadend事件觸發(fā)的時(shí)候。

由open()方法的第三個(gè)參數(shù)決定，當(dāng)?shù)谌齻€(gè)參數(shù)async為true時(shí)，發(fā)送異步請(qǐng)求，為false時(shí)則為同步請(qǐng)求

當(dāng)xhr為同步請(qǐng)求時(shí)，有如下限制：

xhr.timeout必須為0

xhr.withCredentials必須為 false

xhr.responseType必須為""(即默認(rèn)值)

避免使用同步請(qǐng)求：因?yàn)槲覀儫o(wú)法設(shè)置請(qǐng)求超時(shí)時(shí)間（xhr.timeout為0，即不限時(shí)）。在不限制超時(shí)的情況下，有可能同步請(qǐng)求一直處于pending狀態(tài)，服務(wù)端遲遲不返回響應(yīng)，這樣整個(gè)頁(yè)面就會(huì)一直阻塞，無(wú)法響應(yīng)用戶(hù)的其他交互。

我們可以通過(guò)onprogress事件來(lái)實(shí)時(shí)顯示進(jìn)度，默認(rèn)情況下這個(gè)事件每50ms觸發(fā)一次。需要注意的是，上傳過(guò)程和下載過(guò)程觸發(fā)的是不同對(duì)象的onprogress事件：

上傳觸發(fā)的是xhr.upload對(duì)象的 onprogress事件

下載觸發(fā)的是xhr對(duì)象的onprogress事件

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
    if (event.lengthComputable) {
      var completedPercent = event.loaded / event.total;
    }
 }

每一XMLHttpRequest對(duì)象都有一個(gè)upload屬性，而upload是一個(gè)XMLHttpRequestUpload對(duì)象.XMLHttpRequest和XMLHttpRequestUpload對(duì)象共同擁有上述(除onreadystatechange事件)事件。onreadystatechange是XMLHttpRequest對(duì)象獨(dú)有的事件

觸發(fā)xhr.onreadystatechange(之后每次readyState變化時(shí)，都會(huì)觸發(fā)一次)

觸發(fā)xhr.onloadstart

上傳階段開(kāi)始：

觸發(fā)xhr.upload.onloadstart

觸發(fā)xhr.upload.onprogress

觸發(fā)xhr.upload.onload

觸發(fā)xhr.upload.onloadend

上傳結(jié)束，下載階段開(kāi)始：

觸發(fā)xhr.onprogress

觸發(fā)xhr.onload

觸發(fā)xhr.onloadend

一旦發(fā)生abort或timeout或error異常，先立即中止當(dāng)前請(qǐng)求

將 readystate 置為4，并觸發(fā) xhr.onreadystatechange事件

如果上傳階段還沒(méi)有結(jié)束，則依次觸發(fā)以下事件：

xhr.upload.onprogress

xhr.upload.[onabort或ontimeout或onerror]

xhr.upload.onloadend

注意不會(huì)觸發(fā)onload事件

觸發(fā) xhr.onprogress事件

觸發(fā) xhr.[onabort或ontimeout或onerror]事件

觸發(fā)xhr.onloadend 事件

注意不會(huì)觸發(fā)onload事件

注意： 這時(shí)候的xhr.readyState為4，xhr.status為0

從上面介紹的事件中，可以知道若xhr請(qǐng)求成功，就會(huì)觸發(fā)xhr.onreadystatechange和xhr.onload兩個(gè)事件。由于xhr.onreadystatechange是每次xhr.readyState變化時(shí)都會(huì)觸發(fā)，而不是xhr.readyState=4時(shí)才觸發(fā)（例如發(fā)生abort、timeout、error異常，會(huì)先終止當(dāng)前請(qǐng)求，將readyState設(shè)置為4，并觸發(fā)onreadystatechange事件），因此建議在onload事件中注冊(cè)成功回調(diào)

xhr.onload = function () {
    //如果請(qǐng)求成功
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      //do successCallback
    }
  }

xhr.status代表相應(yīng)的HTTP狀態(tài)
以2開(kāi)頭的狀態(tài)碼，代表請(qǐng)求已經(jīng)成功被服務(wù)器接收、理解、并接受
狀態(tài)代碼304代表請(qǐng)求的資源并沒(méi)有修改，可以直接使用瀏覽器中緩存的版本
其他以3開(kāi)頭的狀態(tài)代碼則表示需要客戶(hù)端采取進(jìn)一步的操作才能完成請(qǐng)求。

status是響應(yīng)的HTTP狀態(tài)，statusText是HTTP狀態(tài)的說(shuō)明

readyState是表示在請(qǐng)求/響應(yīng)過(guò)程中的當(dāng)前活動(dòng)處于哪個(gè)階段

你真的會(huì)使用XMLHttpRequest嗎？