疯狂

STANDING ON THE SHOULDERS OF GIANTS
posts - 481, comments - 486, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

jquery 全局事件

Posted on 2010-04-16 16:29 疯狂 阅读(650) 评论(0)  编辑  收藏 所属分类: jquery

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的使用方法view plaincopy to clipboardprint?
<!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> 


本文来自CSDN博客,:http://blog.csdn.net/gaoyusi4964238/archive/2009/08/13/4443401.aspx


只有注册用户登录后才能发表评论。


网站导航: