jquery中ajax的全域/局部事件例子

(一) 局部事件 local events

局部事件：在單個Ajax請求對象中綁定的事件，每一個 Ajax 請求對象可以根據需要綁定自己的局部事件 。局部事件只會被那個綁定該事件的 Ajax 對象觸發，是屬於單個 Ajax 對象的私人（即局部）事件。此類事件包括：beforeSend、complete、success、error。

$.ajax({
   beforeSend: function(){
 // Handle the beforeSend event
   },
   complete: function(){
 // Handle the complete event
   }
  // ......
 });
(二) 全域事件 global events

全域事件：除了上面說的局部事件外，跟 Ajax 相關的 jquery 事件還有一類事件——全域事件，如 ajaxSend/ajaxComplete/ajaxError/ajaxSuccess/ajaxStart/ajaxStop。不難發現全域事件與局部事件的命名區別，全域事件的名稱都已 ajax開頭。

全域事件，顧名思義，“全域”的意思指的是整個html文檔中所有 Ajax 請求對象公有的事件，這一類事件不是單個 Ajax 請求私人的事件，所以不能在某個 Ajax 請求中定義這類事件的處理函數。那麼這些全域事件的處理函數在哪裡綁定呢？——綁在 document 對象上。

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });
（1）全域事件細化分類

全域事件中又分為2類不同的事件：
1、ajaxStart/ajaxStop的觸發條件是由文檔中的所有Ajax 對象共同影響的。

ajaxStart觸發時刻：jquery官網的解釋是“文檔中某個Ajax 請求已經開始(started)，以此同時沒有任何其他正在運行（running）的Ajax 請求”；
這意味著：
如果第一個 Ajax 請求還沒有結束運行時又開始了另一個 Ajax 請求，那麼 ajaxStart事件只在第一個 Ajax 請求開始時觸發一次；
如果第一個 Ajax 請求已經結束運行，之後又開始了另一個 Ajax 請求，那麼 ajaxStart事件將在第一個請求開始時觸發一次，在第二個請求開始時再觸發一次；

ajaxStop觸發時刻:”當前啟動並執行 Ajax 請求都已結束”;
這意味著：該事件觸發時文檔中一定沒有正在啟動並執行 Ajax 請求；這個事件可能會被觸發多次；

2、ajaxSend/ajaxComplete/ajaxError/ajaxSuccess的觸發條件則不需要文檔中所有 Ajax請求共同影響，它們的觸發條件很簡單：文檔中每一個ajax 請求都會觸發這些事件。

( 2 ) 單個 Ajax 對象如何屏蔽全域事件？

既然全域事件的觸發會受到文檔中所有 Ajax 請求對象的影響，那麼當我們希望某個 Ajax 請求不要觸發全域事件時，該怎麼做呢？——只需要將這個 Ajax 對象的 global 參數設定為 false。

$.ajax({
   url: "test.html",
   global: false,
   // ...
 });
Jquery ajax事件觸發順序和觸發條件

以下排列順序為ajax 事件的觸發順序（從先到後）
1、ajaxStart (Global Event)

This event is triggered if an Ajax request is started and no other Ajax requests are currently running.

2、beforeSend (Local Event)

This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)（//Ajax對象已經產生（started），但還沒有真正發起網路請求。此事件常用來修改 Ajax 對象的要求標頭部。當此事件回呼函數 return false 時，該ajax請求將被取消）

3、ajaxSend (Global Event)

This global event is also triggered before the request is run.

4、success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors with the data).（//成功時即 textStatus=’success/notmodified/nocontent’時觸發。回呼函數中的 data 是 jquery 根據 dataFilter和 dataType進行處理後的資料。success值一般是一個 function，但也可以是一個function 數組，數組中的所有 function 將按順序調用 ）

5、ajaxSuccess (Global Event)

This event is also only called if the request was successful.

6、error (Local Event)

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).（//textStatus=’error/timeout/abort/parseerror’時調用，error值一般是一個 function，但也可以是一個function 數組，數組中的所有 function 將按順序調用 ）

7、ajaxError (Global Event)

This global event behaves the same as the local error event.

8、complete (Local Event)

This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.（//不管請求success還是error，不管請求是同步還是非同步，都會觸發該事件。此事件處理函數中的 textStatus參數可能取值為：”success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, or “parsererror”。complete值一般是一個 function，但也可以是一個function 數組，數組中的所有 function 將按順序調用 ）

9、ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

10、ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed.