1. 程式人生 > >JQ ajax全局事件 (個人學習筆記)

JQ ajax全局事件 (個人學習筆記)

ron strong div sting UNC art append 屬性 res

作用:當你的頁面存在很多ajax事件的話,我們有一些信息是公共的,可以復用,我們可以用全局事件進行編寫,因為每一個ajax事件調用,都會觸發ajax全局事件。

  jquery的ajax方法的全部全局事件:

    ajaxStart:ajax請求開始前

    ajaxSend:ajax請求時

    ajaxSuccess:ajax獲取數據後

    ajaxError:ajax請求發生錯誤後

    ajaxComplete:ajax請求完成時

    ajaxStop:ajax請求停止後

不使用全局事件的做法是:給單個ajax加一個global:false;

  1.ajaxStart

    ajaxStart()方法:每當一個Ajax請求即將發送,jQuery檢查是否有任何其他響應過程中的Ajax請求(註:未完成的請求)。如果沒有檢查到,jQuery就會觸發ajaxStart事件,在這個時間點所有處理函數都會使用.ajaxStart()方法註冊並執行。如果global選項設置為false,調用$.ajax()$.ajaxStep()方法將不會被觸發。

$(document).ajaxStart(function() {
   $( "#loading" ).show();//等待畫面
 });

  2.ajaxSend

    .ajaxSend()方法:每當一個Ajax請求即將發送,jQuery就會觸發ajaxSend

事件,在這個時間點所有處理函數都會使用.ajaxSend()方法註冊並執行。如果global選項設置為false,調用$.ajax()$.ajaxStep()方法將不會被觸發。

$(document).ajaxSend(function(event, request, settings) {
    $( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
});

  3.ajaxSuccess

    .ajaxSuccess()方法:每當一個Ajax請求成功完成,jQuery就會觸發ajaxSuccess

事件,在這個時間點所有處理函數都會使用.ajaxSuccess()方法註冊並執行。如果global選項設置為false,調用$.ajax()$.ajaxStep()方法將不會被觸發。

$(document).ajaxSuccess(function(event, request, settings) {
   $( "#msg" ).append( "<li>Successful Request!</li>" );
 });

  4.ajaxError

    .ajaxError()方法:每當一個Ajax請求出錯時,jQuery就會觸發ajaxError事件,在這個時間點所有處理函數會使用.ajaxError()方法註冊並執行。如果global選項設置為false,調用$.ajax()$.ajaxStep()方法將不會被觸發。

$(document).ajaxError(function(event, request, settings) {
  $( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
});

  5.ajaxComplete

    .ajaxComplete()方法:每當一個Ajax請求完成,jQuery就會觸發ajaxComplete事件,在這個時間點所有處理函數會使用.ajaxComplete()方法註冊並執行。如果global屬性被設置為false,當完成Ajax請求後不會調用這個方法。

$(document).ajaxComplete(function(event,request, settings) {
 $( "#msg" ).append( "<li>請求完成。</li>" );
 });    

  6.ajaxStop

    .ajaxStop()方法:每當一個Ajax請求完成,jQuery檢查是否有任何其他響應過程中的Ajax請求(註:未完成的請求)。如果都執行完成,jQuery就會觸發ajaxStop事件,在這個時間點所有處理函數都會使用.ajaxStop()方法註冊並執行。如果一個未處理完成的Ajax請求用beforeSend回調函數返回false取消,ajaxStop事件也被觸發。如果global選項設置為false,調用$.ajax()$.ajaxStep()方法將不會被觸發。

$(document).ajaxStop(function() {
      $( "#loading" ).hide();
});

JQ ajax全局事件 (個人學習筆記)