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其實也是不錯的選擇。