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工具方法弹出蒙版
May 08 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 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
第十一节--重载
2006/11/16 PHP
实用函数3
2007/11/08 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python文件排序的方法总结
2020/09/13 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
成龙霸王洗发水广告词
2014/03/14 职场文书
投资意向书范本
2014/04/01 职场文书
签约仪式策划方案
2014/06/02 职场文书
学党史心得体会
2014/09/05 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
刑事撤诉申请书
2015/05/18 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
vue递归实现树形组件
2022/07/15 Vue.js