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请求代码以前,否则不会触发

相关文章
相关标签/搜索