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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
js 事件小结 表格区别
2007/08/13 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
理解JS事件循环
2016/01/07 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
python实现井字棋游戏
2020/03/30 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python脚本实现验证码识别
2018/06/07 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Django多数据库的实现过程详解
2019/08/01 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Django使用rest_framework写出API
2020/05/21 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
项目经理岗位职责
2013/11/11 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
优秀教师申报材料
2014/12/16 职场文书
职工年度考核评语
2014/12/31 职场文书
文明旅游倡议书
2015/04/28 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
导游词之桂林山水
2019/09/20 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫