XMLHttpRequest.readyState屬性：跟蹤非同步請求的狀態

在 JavaScript 中，每當 ajax 請求被傳送到伺服器時，我們需要根據請求響應狀態來執行一定的操作，readyState 屬性儲存 XMLHttpRequest 物件的狀態資訊。每當 readyState 屬性改變時，就會觸發 readystatechange 事件，然後將相應的處理程式碼放在 onreadystatechange 事件處理常式中。

非同步響應狀態

使用 readyState 屬性可以實時跟蹤非同步響應狀態。當該屬性值發生變化時，會觸發 readystatechange 事件，呼叫系結的回撥函數。readyState 屬性值說明如表所示。

readyState屬性值

返回值	說明
0	未初始化。表示物件已經建立，但是尚未初始化，尚未呼叫 open() 方法
1	初始化。表示物件已經建立，尚未呼叫 send() 方法
2	傳送資料。表示 send() 方法已經呼叫，但是當前的狀態及 HTTP 頭未知
3	資料傳送中。已經接收部分資料，因為響應及 HTTP 頭不安全，這時通過 responseBody 和 responseText 獲取部分資料會出現錯誤
4	完成。資料接收完畢，此時可以通過 responseBody 和 responseText 獲取完整的響應資料

如果 readyState 屬性值為 4，則說明響應完畢，那麼就可以安全的讀取響應的資料。

考慮到各種特殊情況，更安全的方法是同時監測 HTTP 狀態碼，只有當 HTTP 狀態碼為 200 時，才說明 HTTP 響應順利完成。

範例

下面範例中，修改請求為非同步響應請求，然後通過 status 屬性獲取當前的 HTTP 狀態碼。如果 readyState 屬性值為 4，且 status（狀態碼）屬性值為 200，則說明 HTTP 請求和響應過程順利完成，這時可以安全、非同步的讀取資料。

window.onload = function () {  //頁面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //設定請求的地址
        var xhr = createXHR();  //範例化XMLHttpRequest物件
        xhr.open("POST", url, true);  //建立間接，要求非同步響應
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  //設定為表單方式提交
        xhr.onreadystatechange = function () {  //係結響應狀態事件監聽函數
            if (xhr.readyState == 4) {  //監聽readyState狀態
                if (xhr.status == 200 || xhr.status == 0) {  //監聽HTTP狀態碼
                    console.log(xhr.responseText);  //接收資料
                }
            }
        }
        xhr.send("callback=functionName");  //傳送請求
    }
}

中止請求

使用 abort() 方法可以中止正在進行的請求。用法如下：

xhr.onreadystatechange = function () {};  //清理事件響應函數
xhr.abort();  //中止請求

在呼叫 abort() 方法前，應先清除 onreadystatechange 事件處理常式，因為 IE 和 Mozilla 在請求中止後也會啟用這個事件處理常式。如果給 onreadystatechange 屬性設定為 null，則 IE 會發生異常，所以為它設定一個空函數。