XMLHttpRequest對象

更新于 2016.04.10

XHR的用法

open方法

第一個調(diào)用的方法是open()

xhr.open("get", "example.php", false);

• 第一個參數(shù) － 請求的類型，get，post等
• 第二個參數(shù) － 請求等url
• 第三個參數(shù) － 是否異步發(fā)送請求

只能向同一個域中使用相同端口和協(xié)議的url發(fā)送請求，否則會引發(fā)跨域問題

這行代碼會請求。但是并不會發(fā)送這個請求。發(fā)送請求要用到第二個方法send()

send方法

第二個調(diào)用的方法是send()

xhr.send(null);

這個方法會發(fā)送參數(shù)里的數(shù)據(jù)，如果不需要發(fā)送數(shù)據(jù)，一定要填上null，因為有些瀏覽器必須要求傳入這個參數(shù)

XHR響應(yīng)的相關(guān)屬性

當(dāng)服務(wù)器接到正確請求后會返回響應(yīng)，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性，下面是一些響應(yīng)的相關(guān)屬性

1. responseText － 返回的文本
2. responseXML － 返回的XML DOM文檔
3. status － 響應(yīng)的狀態(tài)
4. statusText － HTTP狀態(tài)說明

收到響應(yīng)后，會檢查status屬性，如果是200，則表示響應(yīng)成功，responseText屬性內(nèi)容已就緒。如果status屬性是304，表示資源沒有被修改，可以使用瀏覽器中緩存的版本。

同步請求的響應(yīng)

處理同步請求

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

異步請求的響應(yīng)

檢測XHR對象的readyState屬性：

• 0 － 未初始化，尚未調(diào)用open()方法
• 1 － 啟動，已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法
• 2 － 發(fā)送，已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)
• 3 － 接收，已經(jīng)接收到部分響應(yīng)數(shù)據(jù)
• 4 － 完成，已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

處理異步請求

在調(diào)用open()之前指定onreadystatechange事件處理程序

var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
    }
}

abort方法

在接收到響應(yīng)之前還可以調(diào)用abort()方法來取消異步請求

調(diào)用這個方法后，xhr對象會停止觸發(fā)事件，而且也不再允許訪問任何與響應(yīng)有關(guān)的對象屬性。在終止請求之后，還應(yīng)該對xhr對象進(jìn)行解引操作。由于內(nèi)存原因，不建議重用xhr對象。