jquery之ajax——全局事件引用方式以及各个事件(全局/局部)执行顺序

转：http://www.cnblogs.com/shuang121/archive/2012/06/06/2537862.html

jquery之ajax——全局事件引用方式以及各个事件(全局/局部)执行顺序

jquery中各个事件执行顺序如下：

1.ajaxStart(全局事件)

2.beforeSend(局部事件)

3.ajaxSend(全局事件)

4.success(局部事件)

5.ajaxSuccess(全局事件)

6.error(局部事件)

7.ajaxError (全局事件)

8.complete(局部事件)

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

其中，全局事件可以在ajax相关方法外引用（比如，通过该方式将ajax执行各个阶段的信息显示在页面某个地方）。

下例演示一次ajax请求过程中各个事件执行的顺序，以及全局ajax的使用方法

 
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    
                     "http://www.w3.org/TR/html4/loose.dtd"> 
    
 <html> 
    
 <head> 
    
   <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
    
   <mce:script type="text/javascript"><!-- 
    
   $( 
    function(){ 
    
    // 
    点击按钮，并执行ajax请求 
    
       $("#ajaxReuqestID").click( 
    function(){ 
    
               $.ajax({ 
    
                    url: "http://blog.csdn.net/gaoyusi4964238", 
    
                    beforeSend: 
    function(){ 
    
                        $("#ajaxStateID").text("berforeSend"); 
    
                         alert("berforeSend"); 
    
                   }, 
    
                    success:  
    function(){ 
    
                        $("#ajaxStateID").text("success"); 
    
                        alert("success");     
    
                   }, 
    
                   error: 
    function(){ 
    
                       $("#ajaxStateID").text("error"); 
    
                        alert("error"); 
    
                   }, 
    
                   complete: 
    function(){ 
    
                       $("#ajaxStateID").text("complete"); 
    
                        alert("complete"); 
    
                   } 
    
                  }); 
    
           }); 
    
           $("#ajaxStateID").ajaxStart( 
    function(){ 
    
               $( 
    this).text("ajaxStart"); 
    
               alert("ajaxStart"); 
    
           }).ajaxSend( 
    function(){ 
    
               $( 
    this).text("ajaxSend"); 
    
               alert("ajaxSend"); 
    
           }).ajaxSuccess( 
    function(){ 
    
               $( 
    this).text("ajaxSuccess"); 
    
               alert("ajaxSuccess"); 
    
           }).ajaxError( 
    function(){ 
    
               $( 
    this).text("ajaxError"); 
    
               alert("ajaxError"); 
    
           }).ajaxComplete( 
    function(){ 
    
               $( 
    this).text("ajaxComplete"); 
    
               alert("ajaxComplete"); 
    
           }).ajaxStop( 
    function(){ 
    
               $( 
    this).text("ajaxStop"); 
    
               alert("ajaxStop"); 
    
           }); 
    
       }) 
    
    // 
     --></mce:script> 
    
 </head> 
    
 <body> 
    
     <input type="button" value="点击触发ajax请求" id="ajaxReuqestID"/> 
    
   <div id="ajaxStateID"></div> 
    
 </body> 
    
 </html>