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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
php中define用法实例
2015/07/30 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python内置函数dir详解
2015/04/14 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python 实现波浪滤镜特效
2020/12/02 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
会计岗位职责
2015/02/03 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python