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 相关文章推荐
js中substring和substr的详细介绍与用法
Aug 29 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python实例化对象的具体方法
2020/06/17 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
劳动实践课感言
2014/02/01 职场文书
旅游市场营销方案
2014/03/09 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
党员承诺书范文2015
2015/04/27 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python