如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、Ajax的XMLHttpRrequest對象

Ajax的核心是XMLHttpRequest對象（發送異步請求、接受響應及執行回調），它是ajax實現的關鍵

XMLHttpRequest對象的open()方法與send()方法

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。 string：僅用于 POST 請求

請求類型，GET 還是 POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

(1). GET請求

(2). POST請求

方法	描述
setRequestHeader(header,value)	向請求添加 HTTP 頭。 header: 規定頭的名稱 value: 規定頭的值

async參數設置

XMLHttpRequest對象如果要用于AJAX的話，其open()方法的async參數必須設置為true

通過 AJAX，JavaScript 無需等待服務器的響應，而是：

• 在等待服務器響應時執行其他腳本
• 當響應就緒后對響應進行處理

(1). 當使用 async=true 時，請規定在響應處于 onreadystatechange 事件中的就緒狀態時執行的函數：

(2). 當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句后面即可：

服務器響應

使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

(1). 如果來自服務器的響應并非 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

(2). 如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性

[javascript] view plain copy

1. xmlDoc=xmlhttp.responseXML;  
2. txt="";  
3. x=xmlDoc.getElementsByTagName("ARTIST");  
4. for (i=0;i<x.length;i++)  
5.   {  
6.   txt=txt + x[i].childNodes[0].nodeValue + "<br />";  
7.   }  
8. document.getElementById("myDiv").innerHTML=txt;  

onreadystatechange事件

當請求被發送到服務器時，我們需要執行一些基于響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

Ajax()函數示例：

• 定義一個函數，用于異步獲取信息

[javascript] view plain copy

1. function Ajax(){  
2.     //code  
3. }  

• 聲明一個空對象來裝入XMLHttpRequest對象

[javascript] view plain copy

1. var xmlHttpReq = null;  

• 給XMLHttpRequest對象賦值

[javascript] view plain copy

1. if(window.ActiveXObject){  
2.     xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
3. }else if(window.XMLHttpRequest){  
4.     xmlHttpReq = new XMLHttpRequest();  
5. }  

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest對象的，而其他瀏覽器的XMLHttpRequest對象是window的子對象。

• • 實例化后，使用open()方法初始化XMLHttpRequest對象，指定HTTP方法和要使用的服務器URL

[javascript] view plain copy

1. xmlHttpReq.open("GET","test.php",true);  

• 因為要做一個異步調用，所以需要注冊一個XMLHttpRequest對象將調用的回調事件處理器當做它的readystate值改變時調用。當readyState值改變時，會激發一個readystatechange事件，可以使用onreadystatechange屬性來注冊該回調事件處理器。

[javascript] view plain copy

1. xmlHttpReq.onreadystatechange = RequestCallBack;  

• 使用send()方法發送請求，因為這個請求使用的是HTTP的“GET”方式，所以可以在不指定參數或使用null參數的情況下調用send()方法

[javascript] view plain copy

1. xmlHttpReq.send(null);  

當請求改變時，XMLHttpRequest對象調用onreadystatechange屬性注冊的事件處理器，因此在處理該響應前，事件處理器首先應該檢查readyState的值和HTTP的狀態。當請求完成加載時（readyState==4）并且已經響應成功（status==200）時，就可以調用JavaScript函數來處理該響應內容。

[javascript] view plain copy

1. function RequestCallBack(){  
2.     if (xmlHttpReq.readyState == 4) {  
3.         if (xmlHttpReq.status == 200) {  
4.             //將xmlHttpReq.responText的值賦予id為resText的元素  
5.             document.getElementById('resText').innerHTML = xmlHttpReq.responText;  
6.         }  
7.     }  
8. }  

二、jQuery中的Ajax

jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()、$.post()方法，第3層是$.getScript()、$.getJSON()方法

1、load()方法    通常用來從WEB服務器上獲取靜態的數據文件

最常用的Ajax方法，能載入遠程HTML代碼并插入DOM中

load(url[,data][,callback]);

• url：String    請求HTML頁面的URL地址
• data：Object    發送至服務器的key/value數據
• callback：Function    請求完成時的回調函數，無論請求成功或失敗

[javascript] view plain copy

1. $(function(){  
2.     $("#send").click(function(){  
3.         $("#resText").load("test.html");  
4.     })  
5. })  

[javascript] view plain copy

1. <button type="button" id="send">ajax加載</button>  
2. <div class="comment">已有評論：</div>  
3. <div id="resText">替換內容</div>  

test.html代碼為：

[javascript] view plain copy

1. <div class="comment">  
2.     <h6>張三：</h6>  
3.     <p class="para">沙發</p>  
4. </div>  
5. <div class="comment">  
6.     <h6>李四：</h6>  
7.     <p class="para">板凳</p>  
8. </div>  
9. <div class="comment">  
10.     <h6>王五：</h6>  
11.     <p class="para">地板</p>  
12. </div>  

篩選載入的HTML文檔

load()方法的URL參數的語法結構為：“url selector”

[javascript] view plain copy

1. $("#resText").load("test.html .para");  

load()傳遞方式根據參數data自動指定，沒有參數 --> GET，反之為POST   

[javascript] view plain copy

1. // 無參數傳遞 GET  
2. $("#resText").load("test.html",function(){  
3.     //code  
4. });  
5. // 有參數傳遞 POST  
6. $("#resText").load("test.html",{name:"rain",age:"22"},function(){  
7.     //code  
8. });  

回調函數：有三個參數，請求返回的內容、請求狀態、XMLHttpRequest對象

[javascript] view plain copy

1. // 回調函數  
2. $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
3.     //responseText  請求返回的內容  
4.     //textStatus    請求狀態：success、error、notmodified、timeout  
5.     //XMLHttpRequest    XMLHttpRequest對象  
6. });  

2、$.get()和$.post()方法    jQuery中的全局函數

2.1 $.get()    使用GET方式來進行異步請求

[javascript] view plain copy

1. $.get(url[,data][,callback][,type]);  

• url：String    請求HTML頁面的URL地址
• data：Object    發送至服務器的key/value數據會作為QueryString附加到請求URL中
• callback：Function    載入成功時回調函數（只有當response的返回狀態是success才調用該函數）自動將請求結果和狀態傳遞給該方法
• type：服務器返回內容的格式，包括html、xml、script、json、text、_default

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php",{  
3.         username:$("#username").val(),  
4.         content:$("#comment").val()  
5.     },function(data,textStatus){  
6.         // data：返回的內容  
7.         // textStatus：請求狀態，success、error、notmodified、timeout  
8.     })  
9. })  

數據格式：服務器返回的數據格式

（1）HTML片段    較少工作量

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內容  
6.     // textStatus：請求狀態，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數據添加到頁面上  
8. });  

（2） XML文檔    需要對返回的數據處理

方便使用

可以通過attr()、find()、filter()方法對數據進行處理

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = $(data).find("comment").attr("username");  
7.         var content = $(data).find("comment content").text();  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數據添加到頁面上  
11.     });  
12. })  

由于期待服務器返回的數據類型為XML文檔，因此需要在服務期端設置Content-Type類型

[javascript] view plain copy

1. header("Content-Type:text/html; charset=utf-8");  

（3）JSON文件    需要對返回的數據處理

JSON相對于XML比較簡潔

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get3.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = data.username;  
7.         var content = data.content;  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數據添加到頁面上  
11.     },"json");  
12. })  

以上三種方法對比：

HTML返回數據最簡單，如果數據需要重用使用JSON（性能與文件大小方面有優勢），當遠程程序未知時使用XML。

2.2 $.post()    通過 HTTP POST 請求從服務器上請求數據

[javascript] view plain copy

1. $.post(URL[,data][,callback]);  

• url：String    請求的URL地址
• data：Object    發送至服務器的key/value數據
• callback：Function    載入成功時的回調函數

由于POST和GET方式提交的所有數據都可以通過$_REQUEST[]來獲取，因此只需要改變jQuery函數，就可以將程序在GET請求和POST請求之間切換。

當load()方法帶有參數傳遞時，會使用POST方式發送請求。因此也可以使用load()方法來完成同樣的功能。

$.post()與$.get()方法的區別：

• GET請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web服務器。當然，在Ajax請求中，這種區別對用戶是不可見的。
• GET方式對傳輸的數據有大小限制（通常不能大于2KB），而使用POST方式傳遞的數據量要比GET方式大得多（理論上不受限制）。
• GET方式請求的數據會被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數據，例如賬號和密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題，而POST方式相對來說就可以避免這些問題。
• GET方式和POST方式傳遞的數據在服務器端的獲取也不相同。在PHP中，GET方式的數據可以用$_GET[]獲取，而POST方式可以用$_POST[]獲取。兩種方式都可以用$_REQUEST[]來獲取。

      上面使用load()、$.get()和$.post()方法完成了一些常規的Ajax程序，如果還需要編寫一些復雜的Ajax程序，那么就要用到jQuery中的$.ajax()方法。$.ajax()方法不僅能實現與load()、$.get()和$.post()方法同樣的功能，而且還可以設定beforeSend（提交前回調函數）、error（請求失敗后處理）、success（請求成功后處理）以及complete（請求完成后處理）回調函數，通過這些回調函數，可以給用戶更多的Ajax提示信息。另外，還有一些參數，可以設置Ajax請求的超時時間或者頁面的“最后更改”狀態等。

3、$.getScript()和$.getJSON()方法

3.1 $.getScript()

有時候，在頁面初次加載時就取得所需的全部JavaScript文件是完全沒有必要的。雖然可以在需要哪個JavaScript文件時，動態地創建<script>標簽

[javascript] view plain copy

1. $(document.createElement("script").attr("src","test.js")).appenChild("head");  
2. //或  
3. $("<script type='text/javscript' src='test.js'></script>").appendChild("head");  

上述方法不理想，jQuery又提供了$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

有回調函數

[javascript] view plain copy

1. $.getScript("test.js",function(){  
2.     $(element).click(function(){  
3.         $(element).animate({backgroundcolor:'pink'},1000)  
4.         .animate({backgroundcolor:'coral'},1000);  
5.     })  
6. });  

3.2 $.getJSON()方法    用于加載JSON文件，用法同$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json");  
4.     })  
5. })  

上面函數雖然加載了JSON代碼，但是并沒有告訴JS對返回的數據如何處理，所以需要回調函數

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(){  
4.             //data：返回的數據  
5.         });  
6.     })  
7. })  

jQuery遍歷方法  -->  $.each()方法    遍歷對象和數組

$.each(data,callback)    // 為全局函數   不同于each()方法

• data：數組或對象

• callback：回調函數，有兩個參數（對象的成員或數組的索引，對應變量或內容）

4、$.ajax()方法    jQuery最底層的Ajax實現

$.ajax(options);

參數名稱	類型	說明
url	String	（默認為當前頁地址）發送請求的地址
type	String	請求方式（POST/GET）默認GE 注意其他HTTP請求方法，例如PUT和DELETE，僅部分瀏覽器支持
timeout	Number	設置請求超時時間（毫秒） 此設置將覆蓋$.ajaxSetup()方法的全局設置
data	Object/String	發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。 GET請求中將附加在URL后。防止這種自動轉換，可以查看processData選項。 對象必須為key/value格式     例如：{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。 如果是數組，jQuery將自動為不同的值對應同一個名稱     例如：{foo:["bar1"，"bar2"]}轉換為&foo=bar1&foo=bar2
dataType	String	預期服務器返回的數據類型。 如果不指定，jQuery將自動根據HTTP包MIME信息返回responseXML或responseText， 并作為回調函數參數傳遞。 可用類型， xml：返回XML文檔，可用jQuery處理 html：返回純文本HTML信息，包含的script標簽會在插入DOM是執行 script：返回純文本的JavaScript代碼，不會自動緩存結果。除非設置cache參數             注意在遠程請求時（不在同一個域下），所有POST請求都將轉換為GET請求 json：返回json數據 jsonp：jsonp格式，使用jsonp形式調用參數時，myurl?callback=? jQuery：將自動替換后一個“？”為正確的函數名，以執行回調函數 text：返回純文本字符串
beforeSend	Function	發送請求前可以修改XMLHttpRequest對象的函數例如添加自定義HTTP頭。 在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象是唯一的函數 function(XMLHttpRequest){     this;//調用本次Ajax請求時傳遞的options參數 }
complete	Function	請求完成后調用的函數（請求成功或失敗時均調用） 參數：XMLHttpRequest對象和一個描述成功請求類型的字符串 function(XMLHttpRequest，textStatus){     this;//調用本次Ajax請求時傳遞的options參數 }
success	Function	請求完成后調用的函數（請求成功或失敗時均調用） 參數：(1) 由服務器返回，并根據datatype參數進行設置            (2) 描述狀態的字符串 function(XMLHttpRequest，textStatus){     //data可能是XMLDoc、jsonObj、html、text等     this;//調用本次Ajax請求時傳遞的options參數 }
error	Function	請求失敗時被調用的函數 參數：(1) XMLHttpRequest對象            (2) 錯誤信息            (3) 捕獲的錯誤對象（可選） function(XMLHttpRequest，textStatus,errorThrown){     //通常情況下textStatus和errorThrown只有其中一個包含信息     this;//調用本次Ajax請求時傳遞的options參數 }
global	Boolean	默認為true。表示是否觸發全局Ajax事件。設置為false將不會觸發全局Ajax事件 AjaxStart或AjaxStop可用于控制各種Ajax事件

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()這些方法，都是基于$.ajax()方法構建的，$.ajax()方法是jQuery最底層的Ajax實現，因此可以用它來代替前面的所有方法。

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.js",  
6.             dataType:"script"  
7.         });  
8.     });  
9. })  

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(data){  
4.                 $("#resText").empty();  
5.                 var html = " ";  
6.                 $.each(data,function(commentIndex,comment){  
7.                     html+='<div class="comment"><h6>'+comment['username']  
8.                          +'</h6><p class="para">'+comment['content']  
9.                          +'</p></div>'  
10.                 })  
11.                 $("resText").html(html);  
12.             }  
13.         });  
14.     });  
15. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.json",  
6.             dataType:"json",  
7.             success:function(data){  
8.                 $("#resText").empty();  
9.                 var html = " ";  
10.                 $.each(data,function(commentIndex,comment){  
11.                     html+='<div class="comment"><h6>'+comment['username']  
12.                          +'</h6><p class="para">'+comment['content']  
13.                          +'</p></div>'  
14.                 })  
15.                 $("resText").html(html);  

1. })

} }); });

三、序列化元素

1．serialize()方法

異步提交表單，并將服務器返回的數據顯示到當前頁面中

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內容  
6.     // textStatus：請求狀態，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數據添加到頁面上  
8. });  

serialize()方法也是作用于一個jQuery對象，它能夠將DOM元素內容序列化為字符串，用于Ajax請求?？蓪⑸鲜龃a簡化為：

[javascript] view plain copy

1. $.get("get1.php",$("#form1").serialize(),function(data,textStatus){  
2.     // data：返回的內容  
3.     // textStatus：請求狀態，success、error、notmodified、timeout  
4.     $("#resText").html(data);   //將返回的數據添加到頁面上  
5. });  

serialize()方法作用于jQuery對象，所以不光只有表單能使用它，其他選擇器選取的元素也都能使用它，如以下jQuery代碼：

[javascript] view plain copy

1. $(":checkbox,:radio").serialize();  

把復選框和單選框的值序列化為字符串形式，只會將選中的值序列化。

2．serializeArray()方法

該方法不是返回字符串，而是將DOM元素序列化后，返回JSON格式的數據

3．$.param()方法

它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。

比如將一個普通的對象序列化：

四、jQuery中的全局事件

jQuery簡化Ajax操作不僅體現在調用Ajax方法和處理響應方面，而且還體現在對調用Ajax方法的過程中的HTTP請求的控制。通過jQuery提供的一些自定義全局函數，能夠為各種與Ajax相關的事件注冊回調函數。例如當Ajax請求開始時，會觸發ajaxStart()方法的回調函數；當Ajax請求結束時，會觸發ajaxStop()方法的回調函數。這些方法都是全局的方法，因此無論創建它們的代碼位于何處，只要有Ajax請求發生時，就會觸發它們。

有時，當網頁加載過慢時，就需要為網頁添加一個提示信息，常用的提示信息是“加載中…”，代碼如下：

[javascript] view plain copy

1. <div class="loading">加載中...</div>  

然后通過CSS控制元素隱藏，當Ajax請求開始的時候，將此元素顯示，用來提示用戶Ajax請求正在進行。當Ajax請求結束后，將此元素隱藏。

[javascript] view plain copy

1. $("$loading").ajaxStart(function(){  
2.     $(this).show();  
3. }).ajaxStop(function(){  
4.     $(this).hide();  
5. });  

jQuery的Ajax全局事件中還有幾個方法，也可以在使用Ajax方法的過程中為其帶來方便。

方法名稱	說明
ajaxComplete(callback)	Ajax請求完成時執行的函數
ajaxError(callback)	Ajax請求發生錯誤時執行的函數，捕捉到的錯誤可以作為最后一個參數傳遞
ajaxSend(callback)	Ajax請求發送前執行的函數
ajaxSuccess(callback)	Ajax請求成功時執行的函數

注意：

1，如果想使某個Ajax請求不受全局方法的影響，那么可以在使用$.ajax(options)方法時，將參數中的global設置為false，jQuery代碼如下

[javascript] view plain copy

1. $.ajax({  
2.     url:"test.html",  
3.     global:false  
4. });  

2，在jQuery1.5版本之后，如果Ajax請求不觸發全局方法，那么可以設置：

[javascript] view plain copy

1. $.ajaxPrefilter(function(options){  
2.     options.global = true;  
3. })  

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務