Ajax不是一種新的編程語言，而是使用現(xiàn)有標(biāo)準(zhǔn)的新方法。AJAX可以在不重新加載整個頁面的情況下，與服務(wù)器交換數(shù)據(jù)。這種異步交互的方式，使用戶單擊后，不必刷新頁面也能獲取新數(shù)據(jù)。

XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了接口。能夠以異步方式從服務(wù)器獲取新數(shù)據(jù)。

在瀏覽器中創(chuàng)建對象(只支持IE7及更高的版本)：

var xhr = new XMLHttpRequest(); 

XHR的用法

首先要介紹的是open()方法。它接收3個參數(shù)：

•要發(fā)送的請求的類型(POST、GET等)

•請求的URL

•表示是否異步發(fā)送請求的布爾值

調(diào)用open()示例：

xhr.open("get", "index.jsp", false);
針對index.jsp的GET請求。URL相對于執(zhí)行代碼的當(dāng)前頁面；調(diào)用open()方法并不會真正發(fā)送請求，只是啟動一個請求以備發(fā)送。

調(diào)用send()發(fā)送請求：

xhr.send(null);

send()接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null。

相應(yīng)數(shù)據(jù)會填充到XHR對象的相關(guān)屬性：

•responseText:作為響應(yīng)主體被返回的文本

•responseXML:作為響應(yīng)的內(nèi)容類型是“text/xml”或“application/xml”

•status:響應(yīng)的HTTP狀態(tài)

•statusText:HTTP狀態(tài)的說明

在接收響應(yīng)后，首先檢查status屬性，確定響應(yīng)已經(jīng)返回，一般200作為成功的標(biāo)志。狀態(tài)碼304表示資源沒有修改，可以直接使用瀏覽器中緩存的版本。

為了接收到合適的響應(yīng)，應(yīng)該以如下方式檢測兩種狀態(tài)碼：

xhr.open("get", "index.jsp", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}

通過檢測readyState屬性，可以確定請求/響應(yīng)過程的當(dāng)前活動階段。

•0：未初始化。未調(diào)用open()方法

•1：啟動。已經(jīng)調(diào)用open()方法，未調(diào)用send()方法

•2：發(fā)送。已經(jīng)調(diào)用send()方法，未接收到響應(yīng)

•3：接收。已經(jīng)接收到部分?jǐn)?shù)據(jù)

•4：完成。已經(jīng)接收到全部數(shù)據(jù)，可以在客戶端使用

readyState屬性的值發(fā)生變化時，都會觸發(fā)一次readystatechange事件。在調(diào)用open()之前指定onreadystatechange事件處理程序才能確保瀏覽器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("請求成功：" + xhr.status);
}
}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

在接收響應(yīng)之前，可以取消異步請求：

xhr.abort();

HTTP頭部信息

XHR對象提供了操作請求頭部和響應(yīng)頭部信息的方法。

默認(rèn)情況下，在發(fā)送XHR請求的同時，還會發(fā)送下列頭部信息。

•Accept:瀏覽器能夠處理的內(nèi)容類型

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

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

•Accept-Language:瀏覽器當(dāng)前設(shè)置的語言

•Connection:瀏覽器與服務(wù)器之間連接的類型

•Cookie:當(dāng)前頁面設(shè)置的任何Cookie

•Host:發(fā)出請求的頁面所在的域

•Referer:發(fā)出請求的頁面的URL

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

使用setRequestHeader()可以設(shè)置自定義的請求頭部信息。必須在調(diào)用open()方法之后，且在調(diào)用send()之前，調(diào)用

setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null); 

調(diào)用getResponseHeader()并傳入字段名稱，可以取得相應(yīng)的響應(yīng)頭部信息。getAllResponseHeader()取得包含所有頭部信息的長字符串。

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

GET請求

GET用于向服務(wù)器查詢某些信息?？梢詫⒉樵冏址畢?shù)追加到URL的末尾，查詢字符串中的每個參數(shù)的名稱和值都必須使用encodeURIComponent()編碼：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三個參數(shù)：要添加參數(shù)的URL、參數(shù)的名稱和參數(shù)的值。
var url = "login.jsp";
// 添加參數(shù)
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化請求
xhr.open("get", url, false);

POST請求

POST請求用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)。POST請求的主體可以包含非常多的數(shù)據(jù)，而且格式不限。

初始化請求：

xhr.open("post", "login.jsp", true); 
首先將Content-Type頭部信息設(shè)置為application/x-www-form-urlencoded,然后建立一個字符串格式。如果需要將頁面中的表單數(shù)據(jù)進(jìn)行序列化，然后再通過XHR發(fā)送到服務(wù)器，可以使用serialize()函數(shù)來創(chuàng)建這個字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

以上所述是小編給大家介紹的JavaScript中Ajax的深入理解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論