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压缩混淆工具
May 16 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
requireJS使用指南
Apr 27 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详解原生JS回到顶部
Mar 25 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
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 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python装饰器用法示例小结
2018/02/11 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
关于Python解包知识点总结
2020/05/05 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
网络程序员自荐信
2014/01/25 职场文书
学校周年庆活动方案
2014/08/22 职场文书
五五普法心得体会
2014/09/04 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
Django drf请求模块源码解析
2021/06/08 Python
详解SQL的窗口函数
2022/04/21 Oracle