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


Posted in Javascript onJune 02, 2016

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全局事件引用方式及各个事件(全局/局部)执行顺序的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
Angular5.1新功能分享
Dec 21 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue开发环境跨域访问问题
Jan 22 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 #Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 #Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 #Javascript
Jquery获取第一个子元素简单实例
Jun 02 #Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 #Javascript
javascript三种代码注释方法
Jun 02 #Javascript
JavaScript对Json的增删改属性详解
Jun 02 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Vue响应式原理详解
2017/04/18 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
详解Python pygame安装过程笔记
2017/06/05 Python
简单了解python的内存管理机制
2019/07/08 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
入党申请自荐书范文
2014/02/11 职场文书
四年大学自我鉴定
2014/02/17 职场文书
文员求职信
2014/07/15 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python