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的深入理解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!