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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
清空上传控件input file的值
Jul 03 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue中 this.$set的用法详解
Sep 06 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python与Redis的连接教程
2015/04/22 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python SOCKET编程基础入门
2021/02/27 Python
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
乔丹名人堂演讲稿
2014/05/24 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
防灾减灾活动总结
2014/08/30 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android