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 相关文章推荐
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php echo 输出字符串函数详解
2010/05/13 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
使用python turtle画高达
2020/01/19 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python如何实现机器人聊天
2020/09/10 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
交通事故协议书
2014/04/15 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle