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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python设计模式之代理模式实例
2014/04/26 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python实现简单多线程任务队列
2016/02/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
小学英语教学经验交流材料
2015/11/02 职场文书