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入门基础 document.write输出
Feb 22 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 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
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
python palywright库基本使用
2021/01/21 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
学校运动会广播稿
2014/10/11 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python