深入理解JavaScript中Ajax_javascript技巧

Ajax不是一種新的程式設計語言，而是使用現有標準的新方法。AJAX可以在不重新載入整個頁面的情況下，與伺服器交換資料。這種非同步互動的方式，使使用者單擊後，不必重新整理頁面也能擷取新資料。

XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向伺服器發送請求和解析伺服器響應提供了介面。能夠以非同步方式從伺服器擷取新資料。

在瀏覽器中建立對象(只支援IE7及更高的版本)：

var xhr = new XMLHttpRequest(); 

XHR的用法

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

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

•請求的URL

•表示是否非同步發送請求的布爾值

調用open()樣本：

xhr.open("get", "index.jsp", false);
針對index.jsp的GET請求。URL相對於執行代碼的當前頁面；調用open()方法並不會真正發送請求，只是啟動一個請求以備發送。

調用send()發送請求：

xhr.send(null);

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

相應資料會填充到XHR對象的相關屬性：

•responseText:作為響應主體被返回的文本

•responseXML:作為響應的內容類型是“text/xml”或“application/xml”

•status:響應的HTTP狀態

•statusText:HTTP狀態的說明

在接收響應後，首先檢查status屬性，確定響應已經返回，一般200作為成功的標誌。狀態代碼304表示資源沒有修改，可以直接使用瀏覽器中緩衝的版本。

為了接收到合適的響應，應該以如下方式檢測兩種狀態代碼：

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屬性，可以確定請求/響應過程的當前活動階段。

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

•1：啟動。已經調用open()方法，未調用send()方法

•2：發送。已經調用send()方法，未接收到響應

•3：接收。已經接收到部分資料

•4：完成。已經接收到全部資料，可以在用戶端使用

readyState屬性的值發生變化時，都會觸發一次readystatechange事件。在調用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);

在接收響應之前，可以取消非同步請求：

xhr.abort();

HTTP頭部資訊

XHR對象提供了操作要求標頭部和回應標頭部資訊的方法。

預設情況下，在發送XHR請求的同時，還會發送下列頭部資訊。

•Accept:瀏覽器能夠處理的內容類型

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

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

•Accept-Language:瀏覽器當前設定的語言

•Connection:瀏覽器與伺服器之間串連的類型

•Cookie:當前版面設定的任何Cookie

•Host:發出請求的頁面所在的域

•Referer:發出請求的頁面的URL

•User-Aent:瀏覽器的使用者代理程式字串

使用setRequestHeader()可以設定自訂的要求標頭部資訊。必須在調用open()方法之後，且在調用send()之前，調用

setRequestHeader()：

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

調用getResponseHeader()並傳入欄位名稱，可以取得相應的回應標頭部資訊。getAllResponseHeader()取得包含所有頭部資訊的長字串。

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

GET請求

GET用於向伺服器查詢某些資訊。可以將查詢字串參數追加到URL的末尾，查詢字串中的每個參數的名稱和值都必須使用encodeURIComponent()編碼：

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

POST請求

POST請求用於向伺服器發送應該被儲存的資料。POST請求的主體可以包含非常多的資料，而且格式不限。

初始化請求：

xhr.open("post", "login.jsp", true); 首先將Content-Type頭部資訊設定為application/x-www-form-urlencoded,然後建立一個字串格式。如果需要將頁面中的表單資料進行序列化，然後再通過XHR發送到伺服器，可以使用serialize()函數來建立這個字串：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的深入理解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！