jQuery.ajaxComplete() 函數詳解

ajaxComplete()函數用於設置當AJAX請求完成(無論成功或失敗)時執行的回調函數。

這是一個全局AJAX事件函數，用於為所有AJAX請求的ajaxComplete事件綁定事件處理函數。當AJAX請求完成(無論成功或失敗)時，將觸發ajaxComplete事件，並執行綁定的事件處理函數。

該函數必須在jQuery對象實例上調用，ajaxComplete()將為每個匹配元素的ajaxComplete事件綁定處理函數。當AJAX請求完成后，所有匹配元素上的處理函數都將被觸發執行。事件處理函數內的this將指向當前DOM元素。

你可以在同一元素多次調用該函數，從而綁定多個事件處理函數。觸發ajaxComplete事件時，jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。

從jQuery 1.8開始，該函數只能為document對象的ajaxComplete事件綁定處理函數，為其他元素綁定的事件處理函數不會起作用。

如果在jQuery.ajax()或jQuery.ajaxSetup()中將選項參數global設為false，可以禁止該AJAX請求觸發全局的AJAX事件。

該函數屬於jQuery對象(實例)。

語法

jQuery 1.0 新增該函數。

jQueryObject.ajaxComplete( handler )

參數

參數	描述
handler	Function類型觸發該事件時，需要執行的事件處理函數。

回調函數handler有3個參數：其一是表示當前事件的Event對象，其二是發送當前AJAX請求的jqXHR對象，其三是包含為本次AJAX請求設置的所有參數選項(包括無需指定的默認參數選項)的Object對象。

jqXHR對象是經過jQuery封裝的類似XMLHttpRequest的對象。

返回值

ajaxComplete()函數的返回值為jQuery類型，返回當前jQuery對象本身。

示例&說明

請參考以下HTML示例代碼：

<div id="content1">CodePlayer</div>
<div id="content2">專注於編程開發技術分享</div>
<div id="content3">http://www.365mini.com</div>

以下是與ajaxComplete()函數相關的jQuery示例代碼，以演示ajaxComplete()函數的具體用法：

以下代碼請基於1.8之前版本的jQuery來運行(請注意，通過ajaxComplete()設置的事件處理函數與通過$.ajax()的complete選項設置的回調函數，它們的參數是不同的)。

// 當前 jQuery版本：1.7.2 (必須是1.8之前的版本)

$("div").ajaxComplete( function(event, jqXHR, options){
    alert("處理函數1： 當前元素的id為" + this.id + "，請求的url為" + options.url);
} );

$("div").ajaxComplete( function(event, jqXHR, options){
    alert("處理函數2：請求方式為" + options.type);
} );


// 執行該AJAX請求，會彈出6次對話框
// 因為當前頁面有3個div元素，我們為每個div元素綁定了2個事件處理函數
$.ajax( {
    url: "index.html"
} );


// 執行該AJAX請求，會彈出7次對話框
// 因為$.ajax()自己通過complete選項綁定了一個ajaxComplete事件處理函數，這個事件處理函數是綁定在document上的，document只有一個，因此只執行一次
// 當前頁面還有3個div元素，我們為每個div元素綁定了2個事件處理函數
// 因此總共彈出7次對話框
$.ajax( {
    url: "myurl" ,
    complete: function(jqXHR, textStatus){
        // jqXHR 是經過jQuery封裝的XMLHttpRequest對象
        // textStatus 可能為：null、'success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror'等
        
       alert( "ajax()" );
    }
} );

如果當前jQuery為1.8及以上版本，上述jQuery代碼總共只會彈出一次對話框。因為從jQuery 1.8開始，ajaxComplete事件的處理函數必須綁定到document對象上才能生效。

因此，不論當前jQuery為何版本，如果不是特殊需求，我們都應該將ajaxComplete事件的處理函數綁定到document對象上。

$(document).ajaxComplete( function(event, jqXHR, options){
    alert("處理函數1：請求的url為" + options.url);
} );

$(document).ajaxComplete( function(event, jqXHR, options){
    alert("處理函數2：請求方式為" + options.type);
} );


// 執行該AJAX請求，會彈出2次對話框
// 因為document對象上綁定了2個事件處理函數
$.ajax( {
    url: "index.html"
//  , global: false // 可以禁止觸發全局的Ajax事件
} );


// 執行該AJAX請求，會彈出3次對話框
// 因為$.ajax()自己通過complete選項綁定了一個局部的ajaxComplete事件處理函數，它也在document對象上，會執行一次
// 我們還通過ajaxComplete()額外綁定了兩個事件處理函數，會再彈出2次
$.ajax( {
    url: "myurl" ,
    complete: function(jqXHR, textStatus){
        // jqXHR 是經過jQuery封裝的XMLHttpRequest對象
        // textStatus 可能為：null、'success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror'等
       alert( "ajax()" );
    }
//  , global: false // 可以禁止觸發全局的Ajax事件
} );

 

轉載：http://www.365mini.com/page/jquery-ajaxcomplete.htm