Ajax與JSON的一些學習總結
2024-09-01 08:29:12
供稿:網友
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的同步請求代碼如下: