|
1.1.1 摘要
Ajax技術的核心是XMLHttpRequest對象(簡稱XHR),可以通過使用XHR對象獲取到服務器的數據,然后再通過DOM將數據插入到頁面中呈現。雖然名字中包含XML,但Ajax通訊與數據格式無關,所以我們的數據格式可以是XML或JSON等格式。
XMLHttpRequest對象用于在后臺與服務器交換數據,具體作用如下:
本文目錄
1.1.2 正文
XMLHttpRequest是一個JavaScript對象,它是由微軟設計,并且被Mozilla、Apple和Google采納,W3C正在標準化它。它提供了一種簡單的方法來檢索URL中的數據。
我們要創建一個XMLHttpRequest實例,只需new一個就OK了:
//// Creates a XMLHttpRequest object.var req = new XMLHttpRequest();
也許有人會說:“這可不行啊!IE6不支持原始的XHR對象”,確實是這樣,我們在后面將會介紹支持IE6或更老版本創建XHR對象的方法。
XMLHttpRequest的用法
在創建XHR對象后,接著我們要調用一個初始化方法open(),它接受五個參數具體定義如下:
void open( DOMString method, //"GET", "POST", "PUT", "DELETE" DOMString url, optional boolean async, optional DOMString user, optional DOMString password);
通過上面的定義我們知道open()方法的簽名包含五個參數,其中有參數method和url地址是必填的,假設我們針對URL: myxhrtest.ASPx發送GET請求獲取數據,具體定義如下:
var req = new XMLHttpRequest();req.open( "GET", "myxhrtest.ASPx", false);
通過上述代碼會啟動一個針對myxhrtest.ASPx的GET請求,這里有兩點要注意:一是URL相對于執行代碼的當前頁面(使用絕對路徑);二是調用open()方法并不會真正發送請求,而只是啟動一個請求準備發送。
只能向同一個域中使用相同端口和協議的URL中發送請求;如果URL與啟動請求的頁面有任何差別,都會引發安全錯誤。
要真正發送請求要使用send()方法,send()方法接受一個參數,即要作為請求主體發送的數據,如果不需要通過請求主體發送數據,我們必須傳遞一個null值。在調用send()之后,請求就會被分派到服務器,完整Ajax請求代碼如下:
var req = new XMLHttpRequest();req.open( "GET", "myxhrtest.ASPx", false);req.send(null);
在發送請求之后,我們需要檢查請求是否執行成功,首先可以通過status屬性判斷,一般來說,可以將HTTP狀態代碼為200作為成功標志。這時,響應主體內容會保存到responseText中。此外,狀態代碼為304表示請求的資源并沒有被修改,可以直接使用瀏覽器緩存的數據,Ajax的同步請求代碼如下:
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的同步請求,如果我們發送異步請求,那么在請求過程中Javascript代碼會繼續執行,這時可以通過readyState屬性判斷請求的狀態,當readyState = 4時,表示收到全部響應數據,屬性值的定義如下:
readyState值 | 描述 |
0 | 未初始化;尚未調用open()方法 |
1 | 啟動;尚未調用send()方法 |
2 | 已發送;但尚未收到響應 |
3 | 接收;已經收到部分響應數據 |
4 | 完成;收到全部響應數據 |
it知識庫:Ajax與JSON的一些總結,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。