摘要：在中，對(duì)象是通過庫中的對(duì)象實(shí)現(xiàn)的?？梢詸z測對(duì)象的屬性，該屬性表示請(qǐng)求響應(yīng)過程的當(dāng)前活動(dòng)階段。已經(jīng)調(diào)用但尚未接收到響應(yīng)接收。由于內(nèi)存原因，不建議重用對(duì)象。頭部信息對(duì)象提供了操作請(qǐng)求頭部和響應(yīng)頭部信息的方法。建議使用自定義的頭部名稱。

在IE5中，XHR對(duì)象是通過MSXML庫中的ActiveX對(duì)象實(shí)現(xiàn)的。在IE中可能會(huì)遇到三種不同版本的XHR對(duì)象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。

適用于IE7之前的瀏覽器的代碼：

function createXHR() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (e) {
                //
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

IE7之后的版本和其他瀏覽器都會(huì)使用下面的函數(shù)來創(chuàng)建：

var xhr = new XMLHttpRequest();

兼容代碼：

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available.");
    }
}

兼容代碼的應(yīng)用：

var xhr = new createXHR();

在使用XHR對(duì)象時(shí)，要調(diào)用的第一方法時(shí)

open（），它接收三個(gè)參數(shù)：要發(fā)送請(qǐng)求的類型，請(qǐng)求的URL和表示是否異步發(fā)送請(qǐng)求的布爾值。

如：

xhr.open("get", "note.txt", false);

open()表示啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送，send()方法才是真正的發(fā)送；

要發(fā)送特定的請(qǐng)求，要向下面一樣調(diào)用

send()方法：

如：

xhr.open("get", "note.txt", false);
xhr.send(null);

XHR從服務(wù)器返回后，發(fā)生變化的屬性，即保存服務(wù)器相應(yīng)數(shù)據(jù)的屬性為：

responseText:作為響應(yīng)主體被返回的文本

responseXML:如果響應(yīng)類型是"text/xml"和"application/xml"，則保存著響應(yīng)數(shù)據(jù)的XML DOM文檔

status：響應(yīng)的HTTP狀態(tài)

statusText：HTTP狀態(tài)的說明

一般來說，可以將HTTP狀態(tài)嗎為200作為成功標(biāo)志，此時(shí)responseText屬性內(nèi)容準(zhǔn)備就緒，responseXML也應(yīng)該能夠訪問。此外狀態(tài)嗎為304表示請(qǐng)求的資源沒有被修改，可以直接使用瀏覽器中緩存的版本。

完整代碼如下：

var xhr = new XMLHttpRequest();

xhr.open("get", "note.txt", false);
xhr.send(null);

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

要注意的是：

我們?cè)诙鄶?shù)情況下都要發(fā)送異步請(qǐng)求的，才能讓js繼續(xù)執(zhí)行而不必等待響應(yīng)。

可以檢測XHR對(duì)象的readyState屬性，該屬性表示請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段。這個(gè)屬性可取的值如下：

0：未初始化。尚未調(diào)用open()；

1：啟動(dòng)。已經(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ù)，而且可以在客戶端中使用；

具體格式如下：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.send();

舉個(gè)例子：

json文件：

[{
    "name": "oliver",
    "age": 18,
    "user": true
}, {
    "name": "troy",
    "age": 26,
    "user": true
}]

dom：

insert

js：

var btn = document.getElementById("btn"),
    pre = document.getElementById("pre"),
    obj = null;

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                pre.innerHTML = obj[1].name; //troy
            }
        }
    };
    xhr.open("get", "user.json", true);
    xhr.send();
};

當(dāng)點(diǎn)擊btn時(shí)，pre部分顯示獲取的json文件中的部分信息。

另外在接收到響應(yīng)之前還可以調(diào)用

abort()方法來取消異步請(qǐng)求。

如下所示：

xhr.abort();

在終止請(qǐng)求之后，還應(yīng)該對(duì)XHR對(duì)象進(jìn)行解引用操作。由于內(nèi)存原因，不建議重用XHR對(duì)象。

XHR對(duì)象提供了操作請(qǐng)求頭部和響應(yīng)頭部信息的方法。 在默認(rèn)情況下，在發(fā)送XHR請(qǐng)求同時(shí)，還會(huì)發(fā)送下列頭部信息：

Accept： 瀏覽器能夠處理的內(nèi)容類型

Accept - Charset： 瀏覽器能夠顯示的字符集

Accept - Encoding: 瀏覽器能夠處理的壓縮編碼

Accept - Language: 瀏覽器當(dāng)前設(shè)置的語言

Connection: 瀏覽器與服務(wù)器之間連接的類型

Cookie: 當(dāng)前頁面設(shè)置的任何Cookie

Host: 發(fā)送請(qǐng)求的頁面所在的域

Referer: 發(fā)送請(qǐng)求的頁面的URI

User - Agent: 瀏覽器的用戶代理字符串

使用

setRequestHeader()方法可以設(shè)置自定義的請(qǐng)求頭部信息。

這個(gè)方法接收兩個(gè)參數(shù)： 頭部字段名和頭部字段值。 要成功發(fā)送請(qǐng)求頭部信息， 必須在調(diào)用open（） 方法之后且send（） 方法之前調(diào)用它。 建議使用自定義的頭部名稱。如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //這里定義
xhr.send();

另外，調(diào)用XHR對(duì)象的getResponseHeader()方法傳入頭部字段名稱，可以取得相應(yīng)的響應(yīng)頭部信息。而調(diào)用getAllResponseHeaders()方法則可以取得一個(gè)包含所有頭部信息的長字符串：

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

用encodeURIComponent()編碼后的格式如下：

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面的函數(shù)可以輔助向現(xiàn)有的URL的末尾添加查詢字符串參數(shù)：

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&"); //檢查URL是否包含問號(hào)（以確定是否已經(jīng)有參數(shù)存在），沒有就加上問好，否則添加一個(gè)和號(hào)
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

舉個(gè)例子：

var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);

POST請(qǐng)求通常用于向服務(wù)器發(fā)送應(yīng)該保存的數(shù)據(jù)

使用post提交，要設(shè)置頭部屬性Content-type。如果不設(shè)置，會(huì)出現(xiàn)數(shù)據(jù)無法解碼和獲取等問題。