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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
小程序实现文字循环滚动动画
Jun 14 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
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
JS实现音乐钢琴特效
2020/01/06 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
讲解Python中的递归函数
2015/04/27 Python
Python实现截屏的函数
2015/07/25 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
django解决订单并发问题【推荐】
2019/07/31 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
学雷锋月活动总结
2014/04/25 职场文书
2015年保送生自荐信
2015/03/24 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android