|
|
1.1.1 摘要
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR），可以通過使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁(yè)面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無(wú)關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式。
XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，具體作用如下：
- 在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)
- 在頁(yè)面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
- 在頁(yè)面已加載后從服務(wù)器接收數(shù)據(jù)
- 在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)
本文目錄
1.1.2 正文
XMLHttpRequest是一個(gè)JavaScript對(duì)象，它是由微軟設(shè)計(jì)，并且被Mozilla、Apple和Google采納，W3C正在標(biāo)準(zhǔn)化它。它提供了一種簡(jiǎn)單的方法來(lái)檢索URL中的數(shù)據(jù)。
我們要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest實(shí)例，只需new一個(gè)就OK了：
//// Creates a XMLHttpRequest object.var req = new XMLHttpRequest();
也許有人會(huì)說(shuō)：“這可不行?。E6不支持原始的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)前頁(yè)面（使用絕對(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)求的頁(yè)面有任何差別，都會(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屬性判斷，一般來(lái)說(shuō)，可以將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ù)，屬性值的定義如下：
readyState值 | 描述 |
0 | 未初始化；尚未調(diào)用open()方法 |
1 | 啟動(dòng)；尚未調(diào)用send()方法 |
2 | 已發(fā)送；但尚未收到響應(yīng) |
3 | 接收；已經(jīng)收到部分響應(yīng)數(shù)據(jù) |
4 | 完成；收到全部響應(yīng)數(shù)據(jù) |
it知識(shí)庫(kù)：Ajax與JSON的一些總結(jié)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
