jquery项目加全局响应拦截器 jquery全局事件

转载

epeppanda 2024-04-09 22:42:59

文章标签 jquery项目加全局响应拦截器 jquery的ajax全局事件 ajax jQuery 事件处理 文章分类 jQuery 前端开发

jQuery扫盲之全局Ajax事件

写于2013年09月10日关于JavaScript,jQuery

当今天没啥东西写的时候，会强迫自己看看一些常用的，但是又不完全了解的东西，例如各种文档、各种API参考等。扫盲系列其实就是去读这些API的文档，去发掘一些我们不知道的用法和要注意的事情。

今天讨论的是jQuery中有关Ajax的全局事件，这些事件有时候可以使我们的代码更加简洁，表现更加一致。

当jQuery.ajaxSetup()返回的global属性是true的时候(这个也是默认值)，全局的Ajax事件才能生效。还有，调用jQuery.ajax的时候如果选项中的global为false，这次请求也不会触发全局的Ajax事件。注意，跨域的Ajax或者是jsonp是无论如何都不会触发这些全局的Ajax事件的。

强烈建议在document上绑定这些事件(在jQuery 1.8往后的版本只能绑定在document上了)。这些全局Ajax事件的绑定方法都只接受一个参数，就是要绑定的事件处理程序。

ajaxComplete

处理程序接受三个参数，事件对象、XMLHttpRequest对象、调用这次Ajax的ajaxOptions。每一个Ajax请求完成(无论成功或者失败)时，都会调用所有事件处理程序。

ajaxError

处理程序接受四个参数，事件对象、jQuery封装的XHR对象、调用这次Ajax的ajaxOptions、还有抛出的错误，例如服务器错误(5xx)、路径错误(4xx)或者是当数据类型是json或者其他特定类型时解析错误(json语法错误)等。错误以字符串的形式返回，例如Not found、Internal Server Error等。每一次Ajax请求以失败告终的时候，都会调用所有事件处理程序。

ajaxSend

处理程序接受三个参数，与ajaxError的前三个参数一致。每一次发出一个Ajax请求时，都会嗲用所有事件处理程序。

ajaxStart

处理程序不接受任何参数。当一个Ajax请求发出之前，jQuery会检测是否正在有其他Ajax请求已经发出。如果没有，则认为这个请求是当前第一个发出的Ajax请求，ajaxStart会被触发。触发时会调用所有事件处理程序。

ajaxStop

处理程序不接受任何参数。当一个Ajax请求完成之后，jQuery会检测是否还有其他Ajax请求还没完成。如果没有，则认为这个请求是当前完成的最后一个Ajax请求，ajaxStop会被触发。触发时会调用所有事件处理程序。

ajaxSuccess

处理程序接受三个参数，与ajaxComplete一致。当请求正确返回(2xx或者304)时，会调用所有事件处理程序。

执行顺序

经过上面的解释，其实已经可以得出这几个事件的执行顺序了。先是ajaxStart，然后是ajaxSend，请求返回后根据返回正确与否触发ajaxSuccess或者是ajaxError，然后是ajaxComplete，最后是ajaxStop。我写了一个例子，可以参考这里。

例子的执行跟文档有一点出入，就是事件处理程序的接受的参数不同(jQuery是2.x的最高版本)：

ajaxStart和ajaxStop的事件处理程序接受一个参数，就是jQuery封装的事件对象。