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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
layui导航栏实现代码
May 19 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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读取汉字的点阵数据
2015/06/22 PHP
php依赖注入知识点详解
2019/09/23 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
python self,cls,decorator的理解
2009/07/13 Python
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
宿舍卫生检讨书
2014/01/16 职场文书
干部鉴定材料
2014/05/18 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
党员身份证明材料
2015/06/19 职场文书
安全生产培训心得体会
2016/01/18 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL