ajax請求中的6個全局事件

//事件觸發順序ajaxStart,ajaxSend,ajaxSuccess或ajaxError,ajaxComplete,ajaxStop

$(document).ajaxStart(function (event) {
    /*
     * 每個ajax即將發送的時候觸發該事件,只有一個事件對象參數
     */
    console.log('ajaxStart');
})

$(document).ajaxSend(function (event,xhr,opts,err) {
    /*
     * 每個ajax即將發送的時候觸發該事件
     * 此方法接受四個參數,分別是事件對象,XHR對象,和發起ajax請求的配置對象,錯誤信息
     */
    if(opts.type == 'get'){
        xhr.abort();
    }    
})

$(document).ajaxSuccess(function (event,xhr,opts) {
    /*
     * 此方法接受三個參數,分別是事件對象,XHR對象,和發起ajax請求的配置對象
     * 每個ajax請求成功都會觸發該事件
     * 配置對象中的success回調會先執行,而後再執行這個事件
     */
    console.log(JSON.parse(xhr.responseText))
})

$(document).ajaxError(function (event,xhr,opts,err) {
    /*
     * 此方法接受四個參數,分別是事件對象,XHR對象,和發起ajax請求的配置對象,錯誤信息
     * 每個ajax請求失敗都會觸發該事件
     * 配置對象中的error回調會先執行,而後再執行這個事件
     * 若是是客戶端錯誤致使請求失敗,err的值有多是timeout,error,abort,或者是拋出錯誤異常對象
     */
    console.log(err)
})

$(document).ajaxComplete(function (event,xhr,opts) {
    /*
     * 此方法接受三個參數,分別是事件對象,XHR對象,和發起ajax請求的配置對象
     * 每個ajax請求完成都會觸發該事件,無論請求的結果如何
     * 配置對象中的complete回調會先執行,而後再執行這個事件
     */
})

$(document).ajaxStop(function (event) {
    /*
     * 此方法只接受一個事件對象參數,此事件只觸發一次
     * 當全部ajax請求完成的時候調用一次,無論ajax請求的狀態是失敗仍是成功或是被取消
     */
})

 注意:ajaxStart和ajaxSend事件必須放在ajax請求代碼以前,否則不會觸發

相關文章
相關標籤/搜索