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图像处理思路及实现代码
Dec 25 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JS实现简单九宫格抽奖
Jun 28 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 编写的日历
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
在PHP中使用模板的方法
2008/05/24 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
浅析VUE防抖与节流
2020/11/24 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
工业设计专业个人求职信范文
2013/12/28 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
制作部班长职位说明书
2014/02/26 职场文书
争先创优个人总结
2015/03/04 职场文书
人民调解协议书
2016/03/21 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Python实现视频自动打码的示例代码
2022/04/08 Python