摘要：從請求開始算起，若超過時間請求還沒有結束包括成功失敗，則會觸發事件，主動結束該請求。在不限制超時的情況下，有可能同步請求一直處于狀態，服務端遲遲不返回響應，這樣整個頁面就會一直阻塞，無法響應用戶的其他交互。

這篇文章轉發自我之前的一篇博客,是看過《你真的會使用XMLHttpRequest嗎？》后結合自己之前對Ajax認識的總結。

Ajax："Asynchronous JavaScript And XML"即異步JavaScript和XML，是一種創建交互式網頁應用的網頁開發技術，這項技術的核心是瀏覽器提供的XMLHttpRequest對象。

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

獲取全部可獲取（有一些header是獲取不到的）的header字段

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

通過設置xhr.response的類型，是告訴瀏覽器或者xhr如何處理響應數據(對響應數據按照什么樣的格式去處理)

這個方法的作用就是重寫response的MIME類型

這個方法必須在send()方法之前進行調用

可以通過這種方式，可以得到純文本格式的圖片內容，獲取到數據后再使用相應的編碼方法重新構建圖片

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

根據上面的例子，將response的MIME類型設置為了"text/xml",通過這樣的方式，xhr會將響應當做text或者xml來處理，通過xhr.response和xhr.responseText可以獲取到文本格式的相應數據，通過xhr.responseXML可以獲取到XML格式(是一顆DOM樹/DOM對象)的數據

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

根據上面的例子，將response的MIME類型設置為了"text/plain",通過這樣的方式，xhr會將相應當做text或者plain(純文本)來處理，通過xhr.response和xhr.responseText可以獲取到文本格式的相應數據，通過xhr.responseXML獲取到的數據為null，即便數據是XML

responseType是XMLHttpRequest leve2中新增的屬性，用來指定xhr.response的數據類型

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

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

xhr.send();

xhr提供了3個屬性來獲取請求返回的數據，分別是：xhr.response, xhr.responseText, xhr.responseXML

xhr.response:

無論xhr.responseType的值是什么，只要請求完成，都可以從xhr.response中取到對應的值

請求未完成時，xhr.response的值與xhr.responseType有關，xhr.responseType的值為""(默認值)或者text時，xhr.response的值為"",否則為null

xhr.responseText:

只有當responseType設置為""或者text時，才可以使用這個屬性獲取相應內容

請求未完成、失敗時，該值為空字符串

xhr.responseXML:

只有當 responseType 為""、document時，此時才能調用xhr.responseXML，否則拋錯

請求未完成、失敗時，該值為null

用xhr.readyState屬性可以獲取ajax的狀態，每當xhr.readyState的值發生變化時，就會觸發xhr.onreadystatechange事件，可以在這個事件中進行相應的操作

為了保證跨瀏覽器兼容性，必須在調用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屬性來允許設置請求的超時時間。

從請求開始 算起，若超過 timeout 時間請求還沒有結束（包括成功/失敗），則會觸發ontimeout事件，主動結束該請求。

請求開始：xhr.onloadstart事件觸發的時候，也就是你調用xhr.send()方法的時候

請求結束：xhr.loadend事件觸發的時候。

由open()方法的第三個參數決定，當第三個參數async為true時，發送異步請求，為false時則為同步請求

當xhr為同步請求時，有如下限制：

xhr.timeout必須為0

xhr.withCredentials必須為 false

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

避免使用同步請求：因為我們無法設置請求超時時間（xhr.timeout為0，即不限時）。在不限制超時的情況下，有可能同步請求一直處于pending狀態，服務端遲遲不返回響應，這樣整個頁面就會一直阻塞，無法響應用戶的其他交互。

我們可以通過onprogress事件來實時顯示進度，默認情況下這個事件每50ms觸發一次。需要注意的是，上傳過程和下載過程觸發的是不同對象的onprogress事件：

上傳觸發的是xhr.upload對象的 onprogress事件

下載觸發的是xhr對象的onprogress事件

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

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

觸發xhr.onreadystatechange(之后每次readyState變化時，都會觸發一次)

觸發xhr.onloadstart

上傳階段開始：

觸發xhr.upload.onloadstart

觸發xhr.upload.onprogress

觸發xhr.upload.onload

觸發xhr.upload.onloadend

上傳結束，下載階段開始：

觸發xhr.onprogress

觸發xhr.onload

觸發xhr.onloadend

一旦發生abort或timeout或error異常，先立即中止當前請求

將 readystate 置為4，并觸發 xhr.onreadystatechange事件

如果上傳階段還沒有結束，則依次觸發以下事件：

xhr.upload.onprogress

xhr.upload.[onabort或ontimeout或onerror]

xhr.upload.onloadend

注意不會觸發onload事件

觸發 xhr.onprogress事件

觸發 xhr.[onabort或ontimeout或onerror]事件

觸發xhr.onloadend 事件

注意不會觸發onload事件

注意： 這時候的xhr.readyState為4，xhr.status為0

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

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

xhr.status代表相應的HTTP狀態
以2開頭的狀態碼，代表請求已經成功被服務器接收、理解、并接受
狀態代碼304代表請求的資源并沒有修改，可以直接使用瀏覽器中緩存的版本
其他以3開頭的狀態代碼則表示需要客戶端采取進一步的操作才能完成請求。

status是響應的HTTP狀態，statusText是HTTP狀態的說明

readyState是表示在請求/響應過程中的當前活動處于哪個階段

你真的會使用XMLHttpRequest嗎？