摘要：在中，對象是通過庫中的對象實現的?？梢詸z測對象的屬性，該屬性表示請求響應過程的當前活動階段。已經調用但尚未接收到響應接收。由于內存原因，不建議重用對象。頭部信息對象提供了操作請求頭部和響應頭部信息的方法。建議使用自定義的頭部名稱。

在IE5中，XHR對象是通過MSXML庫中的ActiveX對象實現的。在IE中可能會遇到三種不同版本的XHR對象，即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之后的版本和其他瀏覽器都會使用下面的函數來創建：

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.");
    }
}

兼容代碼的應用：

var xhr = new createXHR();

在使用XHR對象時，要調用的第一方法時

open（），它接收三個參數：要發送請求的類型，請求的URL和表示是否異步發送請求的布爾值。

如：

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

open()表示啟動一個請求以備發送，send()方法才是真正的發送；

要發送特定的請求，要向下面一樣調用

send()方法：

如：

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

XHR從服務器返回后，發生變化的屬性，即保存服務器相應數據的屬性為：

responseText:作為響應主體被返回的文本

responseXML:如果響應類型是"text/xml"和"application/xml"，則保存著響應數據的XML DOM文檔

status：響應的HTTP狀態

statusText：HTTP狀態的說明

一般來說，可以將HTTP狀態嗎為200作為成功標志，此時responseText屬性內容準備就緒，responseXML也應該能夠訪問。此外狀態嗎為304表示請求的資源沒有被修改，可以直接使用瀏覽器中緩存的版本。

完整代碼如下：

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);
}

要注意的是：

我們在多數情況下都要發送異步請求的，才能讓js繼續執行而不必等待響應。

可以檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段。這個屬性可取的值如下：

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

1：啟動。已經調用open()但未調用send()；

2：發送。已經調用send()但尚未接收到響應；

3：接收。已經接收到部分響應數據；

4：完成。已經接收到全部響應數據，而且可以在客戶端中使用；

具體格式如下：

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();

舉個例子：

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();
};

當點擊btn時，pre部分顯示獲取的json文件中的部分信息。

另外在接收到響應之前還可以調用

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

如下所示：

xhr.abort();

在終止請求之后，還應該對XHR對象進行解引用操作。由于內存原因，不建議重用XHR對象。

XHR對象提供了操作請求頭部和響應頭部信息的方法。 在默認情況下，在發送XHR請求同時，還會發送下列頭部信息：

Accept： 瀏覽器能夠處理的內容類型

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

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

Accept - Language: 瀏覽器當前設置的語言

Connection: 瀏覽器與服務器之間連接的類型

Cookie: 當前頁面設置的任何Cookie

Host: 發送請求的頁面所在的域

Referer: 發送請求的頁面的URI

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

使用

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

這個方法接收兩個參數： 頭部字段名和頭部字段值。 要成功發送請求頭部信息， 必須在調用open（） 方法之后且send（） 方法之前調用它。 建議使用自定義的頭部名稱。如：

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();

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

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

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

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

下面的函數可以輔助向現有的URL的末尾添加查詢字符串參數：

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

舉個例子：

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

POST請求通常用于向服務器發送應該保存的數據

使用post提交，要設置頭部屬性Content-type。如果不設置，會出現數據無法解碼和獲取等問題。