1.1.1 摘要

　　Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡稱XHR），可以通過使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式。

　　XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，具體作用如下：

• 在不重新加載頁面的情況下更新網(wǎng)頁
• 在頁面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
• 在頁面已加載后從服務(wù)器接收數(shù)據(jù)
• 在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)

　　本文目錄

• XMLHttpRequest的用法
• Ajax同源請(qǐng)求
• 同源策略與跨源策略
• Ajax跨源請(qǐng)求

　　1.1.2 正文

　　XMLHttpRequest是一個(gè)JavaScript對(duì)象，它是由微軟設(shè)計(jì)，并且被Mozilla、Apple和Google采納，W3C正在標(biāo)準(zhǔn)化它。它提供了一種簡單的方法來檢索URL中的數(shù)據(jù)。

　　我們要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest實(shí)例，只需new一個(gè)就OK了：

//// Creates a XMLHttpRequest object.var req = new XMLHttpRequest();

　　也許有人會(huì)說：“這可不行啊！IE6不支持原始的XHR對(duì)象”，確實(shí)是這樣，我們?cè)诤竺鎸?huì)介紹支持IE6或更老版本創(chuàng)建XHR對(duì)象的方法。

　　XMLHttpRequest的用法

　　在創(chuàng)建XHR對(duì)象后，接著我們要調(diào)用一個(gè)初始化方法open()，它接受五個(gè)參數(shù)具體定義如下：

void open(   DOMString method, //"GET", "POST", "PUT", "DELETE"   DOMString url,   optional boolean async,   optional DOMString user,   optional DOMString password);

　　通過上面的定義我們知道open()方法的簽名包含五個(gè)參數(shù)，其中有參數(shù)method和url地址是必填的，假設(shè)我們針對(duì)URL: myxhrtest.ASPx發(fā)送GET請(qǐng)求獲取數(shù)據(jù)，具體定義如下：

var req = new XMLHttpRequest();req.open(    "GET",    "myxhrtest.ASPx",    false);

　　通過上述代碼會(huì)啟動(dòng)一個(gè)針對(duì)myxhrtest.ASPx的GET請(qǐng)求，這里有兩點(diǎn)要注意：一是URL相對(duì)于執(zhí)行代碼的當(dāng)前頁面（使用絕對(duì)路徑）；二是調(diào)用open()方法并不會(huì)真正發(fā)送請(qǐng)求，而只是啟動(dòng)一個(gè)請(qǐng)求準(zhǔn)備發(fā)送。

只能向同一個(gè)域中使用相同端口和協(xié)議的URL中發(fā)送請(qǐng)求；如果URL與啟動(dòng)請(qǐng)求的頁面有任何差別，都會(huì)引發(fā)安全錯(cuò)誤。

　　要真正發(fā)送請(qǐng)求要使用send()方法，send()方法接受一個(gè)參數(shù)，即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)，如果不需要通過請(qǐng)求主體發(fā)送數(shù)據(jù)，我們必須傳遞一個(gè)null值。在調(diào)用send()之后，請(qǐng)求就會(huì)被分派到服務(wù)器，完整Ajax請(qǐng)求代碼如下：

var req = new XMLHttpRequest();req.open(    "GET",    "myxhrtest.ASPx",    false);req.send(null);

　　在發(fā)送請(qǐng)求之后，我們需要檢查請(qǐng)求是否執(zhí)行成功，首先可以通過status屬性判斷，一般來說，可以將HTTP狀態(tài)代碼為200作為成功標(biāo)志。這時(shí)，響應(yīng)主體內(nèi)容會(huì)保存到responseText中。此外，狀態(tài)代碼為304表示請(qǐng)求的資源并沒有被修改，可以直接使用瀏覽器緩存的數(shù)據(jù)，Ajax的同步請(qǐng)求代碼如下：

if (req != null) {        req.onreadystatechange = function() {            if ((req.status >= 200 && req.status < 300) || req.status == 304) {                //// Do something.            } else {                alert("Request was unsuccessful: " + req.status);            }    };    req.open("GET", "www.myxhrtest.ASPx", true);    req.send(null);}

　　前面我們定義了Ajax的同步請(qǐng)求，如果我們發(fā)送異步請(qǐng)求，那么在請(qǐng)求過程中Javascript代碼會(huì)繼續(xù)執(zhí)行，這時(shí)可以通過readyState屬性判斷請(qǐng)求的狀態(tài)，當(dāng)readyState = 4時(shí)，表示收到全部響應(yīng)數(shù)據(jù)，屬性值的定義如下：

it知識(shí)庫：Ajax與JSON的一些總結(jié)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。