一聚教程网:一个值得你收藏的教程网站

热门教程

jquery中ajax的全局/局部事件例子

时间:2022-06-25 17:32:16 编辑:袖梨 来源:一聚教程网

(一) 局部事件 local events

局部事件:在单个Ajax请求对象中绑定的事件,每一个 Ajax 请求对象可以根据需要绑定自己的局部事件 。局部事件只会被那个绑定该事件的 Ajax 对象触发,是属于单个 Ajax 对象的私有(即局部)事件。此类事件包括:beforeSend、complete、success、error。

$.ajax({
   beforeSend: function(){
 // Handle the beforeSend event
   },
   complete: function(){
 // Handle the complete event
   }
  // ......
 });
(二) 全局事件 global events

全局事件:除了上面说的局部事件外,跟 Ajax 相关的 jquery 事件还有一类事件——全局事件,如 ajaxSend/ajaxComplete/ajaxError/ajaxSuccess/ajaxStart/ajaxStop。不难发现全局事件与局部事件的命名区别,全局事件的名称都已 ajax开头。

全局事件,顾名思义,“全局”的意思指的是整个html文档中所有 Ajax 请求对象公有的事件,这一类事件不是单个 Ajax 请求私有的事件,所以不能在某个 Ajax 请求中定义这类事件的处理函数。那么这些全局事件的处理函数在哪里绑定呢?——绑在 document 对象上。

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });
(1)全局事件细化分类

全局事件中又分为2类不同的事件:
1、ajaxStart/ajaxStop的触发条件是由文档中的所有Ajax 对象共同影响的。

ajaxStart触发时刻:jquery官网的解释是“文档中某个Ajax 请求已经开始(started),以此同时没有任何其他正在运行(running)的Ajax 请求”;
这意味着:
如果第一个 Ajax 请求还没有结束运行时又开始了另一个 Ajax 请求,那么 ajaxStart事件只在第一个 Ajax 请求开始时触发一次;
如果第一个 Ajax 请求已经结束运行,之后又开始了另一个 Ajax 请求,那么 ajaxStart事件将在第一个请求开始时触发一次,在第二个请求开始时再触发一次;

ajaxStop触发时刻:”当前运行的 Ajax 请求都已结束”;
这意味着:该事件触发时文档中一定没有正在运行的 Ajax 请求;这个事件可能会被触发多次;

2、ajaxSend/ajaxComplete/ajaxError/ajaxSuccess的触发条件则不需要文档中所有 Ajax请求共同影响,它们的触发条件很简单:文档中每一个ajax 请求都会触发这些事件。

( 2 ) 单个 Ajax 对象如何屏蔽全局事件?

既然全局事件的触发会受到文档中所有 Ajax 请求对象的影响,那么当我们希望某个 Ajax 请求不要触发全局事件时,该怎么做呢?——只需要将这个 Ajax 对象的 global 参数设置为 false。

$.ajax({
   url: "test.html",
   global: false,
   // ...
 });
Jquery ajax事件触发顺序和触发条件

以下排列顺序为ajax 事件的触发顺序(从先到后)
1、ajaxStart (Global Event)

This event is triggered if an Ajax request is started and no other Ajax requests are currently running.

2、beforeSend (Local Event)

This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)(//Ajax对象已经产生(started),但还没有真正发起网络请求。此事件常用来修改 Ajax 对象的请求头部。当此事件回调函数 return false 时,该ajax请求将被取消)

3、ajaxSend (Global Event)

This global event is also triggered before the request is run.

4、success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors with the data).(//成功时即 textStatus=’success/notmodified/nocontent’时触发。回调函数中的 data 是 jquery 根据 dataFilter和 dataType进行处理后的数据。success值一般是一个 function,但也可以是一个function 数组,数组中的所有 function 将按顺序调用 )

5、ajaxSuccess (Global Event)

This event is also only called if the request was successful.

6、error (Local Event)

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).(//textStatus=’error/timeout/abort/parseerror’时调用,error值一般是一个 function,但也可以是一个function 数组,数组中的所有 function 将按顺序调用 )

7、ajaxError (Global Event)

This global event behaves the same as the local error event.

8、complete (Local Event)

This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.(//不管请求success还是error,不管请求是同步还是异步,都会触发该事件。此事件处理函数中的 textStatus参数可能取值为:”success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, or “parsererror”。complete值一般是一个 function,但也可以是一个function 数组,数组中的所有 function 将按顺序调用 )

9、ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

10、ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed. 

热门栏目