jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

 更新时间:2016年06月02日 16:38:47   作者:双魂人生  
这篇文章主要介绍了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>

以上所述是小编给大家介绍的jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序的相关知识,希望对大家有所帮助!

相关文章

  • jQuery中的一些小技巧

    jQuery中的一些小技巧

    本文主要总结了jQuery中的一些小技巧。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jQuery实现行文字链接提示效果的方法

    jQuery实现行文字链接提示效果的方法

    这篇文章主要介绍了jQuery实现行文字链接提示效果的方法,实例分析了jQuery操作文字提示效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JQuery的read函数与js的onload不同方式实现

    JQuery的read函数与js的onload不同方式实现

    JQuery的read函数与js的onload,想必大家对这两个方法都有所熟悉吧,接下来介绍一个实例用以上两种方法各自实现,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-03-03
  • jQuery实用技巧必备(下)

    jQuery实用技巧必备(下)

    这篇文章主要介绍了jQuery必不可少的小技巧,这些小技巧就像是创建的快捷方式,可以帮助大家快速开发,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery实现字符串全部替换的方法

    jQuery实现字符串全部替换的方法

    这篇文章主要介绍了jQuery实现字符串全部替换的方法,结合实例形式对比分析了使用Replace进行替换的方法及使用正则进行全部替换的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • CKEditor无法验证的解决方案(js验证+jQuery Validate验证)

    CKEditor无法验证的解决方案(js验证+jQuery Validate验证)

    这篇文章主要为大家详细介绍了CKEditor无法验证的解决方案和jQuery Validate验证框架,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • validform表单验证的实现方法

    validform表单验证的实现方法

    这篇文章主要介绍了validform表单验证的实现方法,validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • jQuery制作圣诞主题页面 更像是爱情影集

    jQuery制作圣诞主题页面 更像是爱情影集

    这篇文章主要为大家详细介绍了jQuery制作圣诞主题页面的方法,类似动感影集,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jquery队列queue与原生模仿其实现方法分享

    jquery队列queue与原生模仿其实现方法分享

    jquery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用。特别animate动画,ajax,以及timeout等需要一定时间的函数
    2014-03-03
  • jQuery代码优化方法总结

    jQuery代码优化方法总结

    本篇文章给大家总结了关于jQuery代码优化方法,如果你这方面有需求,跟着小编一起学习下吧。
    2018-01-01

最新评论