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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
深入了解JavaScript词法作用域
Jul 29 Javascript
详解vue组件之间的通信
Aug 30 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python中join函数简单代码示例
2018/01/09 Python
python批量图片处理简单示例
2019/08/06 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
火锅店的活动方案
2014/08/15 职场文书
委托书的写法
2014/09/16 职场文书
批评与自我批评总结
2014/10/17 职场文书
2015年度女工工作总结
2015/10/22 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle