首页 > 代码库 > jquery中ajax的相关事件汇总

jquery中ajax的相关事件汇总

Jquery ajax事件分类

(一) 局部事件 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请求共同影响,它们的触发条件非常easy:文档中每个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.

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

jquery中ajax的相关事件汇总