jQuery Ajax中的事件詳細介紹_jquery

Ajax會觸發很多事件。
有兩種事件，一種是局部事件，一種是全域事件：
局部事件：通過$.ajax來調用並且分配。

複製代碼 代碼如下:

$.ajax({
    beforeSend: function(){
     // Handle the beforeSend event
    },
    complete: function(){
     // Handle the complete event
    }
    // ...
});

全域事件，可以用bind來綁定，用unbind來取消綁定。這個跟click/mousedown/keyup等事件類別似。但他可以傳遞到每一個DOM元素上。

複製代碼 代碼如下:

$("#loading").bind("ajaxSend", function(){ //使用bind
    $(this).show();
}).ajaxComplete(function(){  //直接使用ajaxComplete
    $(this).hide();
});

當然，你某一個Ajax請求不希望產生全域的事件，則可以設定global:false

複製代碼 代碼如下:

$.ajax({
   url: "test.html",
   global: false,
   // ...
 });

事件的順序如下：

ajaxStart 全域事件
開始新的Ajax請求，並且此時沒有其他ajax請求進行中。
beforeSend 局部事件
當一個Ajax請求開始時觸發。如果需要，你可以在這裡設定XHR對象。
ajaxSend 全域事件
請求開始前觸發的全域事件
success 局部事件
請求成功時觸發。即伺服器沒有返回錯誤，返回的資料也沒有錯誤。
ajaxSuccess 全域事件
全域的請求成功
error 局部事件
僅當發生錯誤時觸發。你無法同時執行success和error兩個回呼函數。
ajaxError 全域事件
全域的發生錯誤時觸發
complete 局部事件
不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發這個事件。
ajaxComplete 全域事件
全域的請求完成時觸發
ajaxStop 全域事件
當沒有Ajax進行中中的時候，觸發。

局部事件回調的參數在文檔中寫的很清楚了，這裡就不累述了。

全域事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3個參數
event, XMLHttpRequest, ajaxOptions
第一個是事件，第二個是XHR對象，第三個參數最有用，是當時調用這個ajax的時候的參數。
對於ajaxError,還有第四個參數thrownError，只有當異常發生時才會被傳遞。
我們可以利用ajaxOptions來寫一個全域的ajax事件。
比如

複製代碼 代碼如下:

$("#msg").beforeSend(function(e,xhr,o) {
    $(this).html("正在請求"+o.url);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.url+"請求成功");
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.url+"請求失敗");
});

對於這個例子，
這樣我們就可以很方便的全域地在某個地方顯示當前的ajax狀態。
當然，之前說了，第三個參數實際上是傳遞給ajax的參數。get/post/load/getScript/getJSON等方法本質上都是調用ajax方法的，所以ajaxOptions.url屬性總是有效。

還有更豐富的例子。
如果你用ajax調用，還可以傳遞自訂參數。下面的例子我就自訂了一個msg參數給了ajax調用

複製代碼 代碼如下:

//自訂參數msg
$.ajax({url:"test1.html",type:"get",msg:"頁面一"});
$.ajax({url:"test2.html",type:"get",msg:"頁面二"});
$.ajax({url:"test3.html",type:"get",msg:"頁面三"});
$.ajax({url:"test4.html",type:"get",msg:"頁面四"});
 
//這裡就能擷取到自訂參數msg。
//這可以用來區別對待不同的ajax請求。
$("#msg").beforeSend(function(e,xhr,o) {
    $(this).html("正在請求"+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.msg+"請求成功");
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.msg+"請求失敗");
});

最後對於load方法，還有話說。

其他的簡易ajax方法，比如get,post,getJSON等，他們的回呼函數都是設定了success回調。

而只有load設定的其實是complete回調。

所以，load裡設定的回呼函數的參數應該有2個。

XMLHttpRequest和textStatus
但實際上也並非如此。
load的回調有三個參數
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
所以，你可以在load的回調裡
通過textStatus==”success”或者textStatus==”error”來判斷是否調用成功。
或者用XMLHttpRequest.status屬性判斷是200還是404或者其他的。

這點上，我認為比普通的get/post等方法更先進。如果要單數設定每get的error是不可能的。但是設定一個全域的ajaxError其實也是不錯的選擇。