首先先介紹下ajax,ajax(ASynchronous JavaScript And XML)為異步的javascript和xml。所謂的異步和同步是指:
同步:客戶端必須等待服務器的響應,在等待期間客戶端不能做其他操作。
異步:客戶端無須等待服務器的響應,在服務器處理請求的過程中,客戶端可以進行其他的操作。
Ajax能夠在無需加載整個頁面的情況下,能夠更新部分網頁內容,可以減小服務器的資源浪費。通過在后台與服務器進行少量數據交換,Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。而傳統的網頁如果需要更新內容,必須重新加載整個網頁頁面。
ajax大體上有四種實現方式,由於基於JS的實現方式太過於復雜,基本上用不到,所以就暫不貼出其實現代碼了。
1.使用$.ajax()發送異步請求
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數,除非你需要操作不常用的選項,以獲得更多的靈活性。 最簡單的情況下,$.ajax()可以不帶任何參數直接使用。
$.ajax的參數列表如下:
url:(默認: 當前頁地址) 發送請求的地址。
async:(默認: true) 默認設置下,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為 false。注意,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行。
type:請求方式,常見參數為POST,GET等等, 默認為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
data:請求參數。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {name:["zhangsan", "lisi"]} 轉換為 '&name=zhangsan&name=lisi'。
dataTpye:預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷,比如XML MIME類型就被識別為XML。在1.4中,JSON就會生成一個JavaScript對象,而script則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后,傳遞給回調函數。可用值如下:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含的script標簽會在插入dom時執行。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。注意:在遠程請求時(不在同一個域下),所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。
"text": 返回純文本字符串
contentType: 請求數據的類型,(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器(即使沒有數據要發送)。如果請求數據是json格式的,則需要填寫'application/json; charset=UTF-8',否則后台無法獲取到數據。
如果要處理$.ajax()得到的數據,則需要使用回調函數。beforeSend、error、dataFilter、success、complete。
- beforeSend 在發送請求之前調用,並且傳入一個XMLHttpRequest作為參數。
- error 在請求出錯時調用。傳入XMLHttpRequest對象,描述錯誤類型的字符串以及一個異常對象(如果有的話)
- dataFilter 在請求成功之后調用。傳入返回的數據以及"dataType"參數的值。並且必須返回新的數據(可能是處理過的)傳遞給success回調函數。
- success 當請求之后調用。傳入返回后的數據,以及包含成功代碼的字符串。
- complete 當請求完成之后調用這個函數,無論成功或失敗。傳入XMLHttpRequest對象,以及一個包含成功或錯誤代碼的字符串。
注意,必須確保網頁服務器報告的MIME類型與我們選擇的dataType所匹配。比如說,JSON的話,服務器端就必須聲明application/json來獲得一致的結果。
示例:
//發送登陸請求
$.ajax({
url:"/login.do" , type:"POST" , dataType:"text", data:{"name":"zhangbo"}, success:function (data) { alert(data); }, error:function () { alert("請求響應錯誤"); } }); //加載並執行一個 JS 文件。 $.ajax({ type: "GET", url: "test.js", dataType: "script" }); //裝入一個 HTML 網頁最新版本。 $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); //同步加載數據。發送請求時鎖住瀏覽器。需要鎖定用戶交互操作時使用同步方式。 var html = $.ajax({ url: "some.php", async: false }).responseText; //發送 XML 數據至服務器。設置 processData 選項為 false,防止自動轉換數據格式。 var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
2.使用$.get()發送get請求
一個簡單的 GET 請求功能 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。
$.get(url, [data], [callback], [type])的參數列表如下:
url:待載入頁面的URL地址
data(可選):待發送 Key/value 參數。
callback(可選):回調函數。
type(可選):響應結果的類型。xml, html, script, json, text, _default。
$.get("/login.do",{username:"zhangbo"},function (data) {
alert(data);
},"text");
3.使用$.post()發送post請求
一個簡單的 POST請求功能 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。
$.post(url, [data], [callback], [type])的參數列表如下:
url:待載入頁面的URL地址
data(可選):待發送 Key/value 參數。
callback(可選):回調函數。
type(可選):響應結果的類型。xml, html, script, json, text, _default。
$.post("/login.do",{username:"zhangbo"},function (data) {
alert(data);
},"text");
除了這些還有put,delete等等請求,和$.get()、$.post()差不多,就不一一敘述了。
上述三種異步實現的方式都大同小異,使用ajax的關鍵就在於json格式數據的獲取與響應,其他的並不難。