ajax異步請求的常見方式

首先先介紹下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格式數據的獲取與響應，其餘的並不難。