Jquery Ajax学习实例7 Ajax所有过程事件分析示例


Posted in Javascript onMarch 23, 2010

一、Ajax所有过程事件分析

   JQuery在执行Ajax的过程中会触发很多事件。
   这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global)。
   局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false。
   全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上。
   这些事件的按照事件的触发顺序如下介绍:

 

局部事件(Local) 全局事件(Global)
ajaxStart 全局事件开始新的Ajax请求,并且此时没有其他ajax请求正在进行。
beforeSend 局部事件当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。 ajaxSend 全局事件请求开始前触发的全局事件。
success 局部事件请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。 ajaxSuccess 全局事件全局的请求成功。
error 局部事件仅当发生错误时触发。你无法同时执行success和error两个回调函数。 ajaxError 全局事件全局的发生错误时触发。
complete 局部事件不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。 ajaxComplete 全局事件全局的请求完成时触发。
ajaxStop 全局事件当没有Ajax正在进行中的时候,触发。
注:除了ajaxStart和ajaxStop之外,其他的事件都有3个参数event, XMLHttpRequest, ajaxOptions第一个是事件,第二个是XHR对象,第三个参数最有用,是当时调用这个ajax的时候的参数。对于ajaxError,还有第四个参数thrownError,只有当异常发生时才会被传递。

 

二、Ajax所有过程事件示例

2.1、HTML代码

      <div>

            <input type="button" onclick="BtnSpareClick();" value="PartEvents" />
            <input type="button" onclick="BtnGlobalClick();" value="GlobalEvents" />

      </div>

       <div id="Result">Result</div>
       <div id="Process">Process</div>

2.2、Jquery Ajax脚本 

局部事件(Local)实例 全局事件(Global)实例
    
Javascript 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
js获取height和width的方法说明
Jan 06 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 #Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 #Javascript
javascript 多浏览器 事件大全
Mar 23 #Javascript
jQuery $.each的用法说明
Mar 22 #Javascript
javascript 用原型继承来实现对象系统
Mar 22 #Javascript
用js实现的自定义的对话框的实现代码
Mar 21 #Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 #Javascript
You might like
调频问题解答
2021/03/01 无线电
长波有什么东西
2021/03/01 无线电
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
小程序关于请求同步的总结
2019/05/05 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python list语法学习(带例子)
2013/11/01 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
详解django自定义中间件处理
2018/11/21 Python
python使用zip将list转为json的方法
2018/12/31 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
策划创业计划书
2014/02/06 职场文书
《影子》教学反思
2014/02/21 职场文书
委托协议书范本
2014/04/22 职场文书
难忘的一课教学反思
2014/04/30 职场文书
房地产活动策划方案
2014/05/14 职场文书
本科应届生自荐信
2014/06/29 职场文书
单位工作证明书格式
2014/10/04 职场文书
Python包argparse模块常用方法
2021/06/04 Python