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的with 语句的使用方法
May 09 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 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/03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
几道PHP面试题
2013/04/14 面试题
中国梦的演讲稿
2014/01/08 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
安全责任书范文
2014/03/12 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
公司的力量观后感
2015/06/05 职场文书
品德与社会教学反思
2016/02/24 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python