转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html

Ajax会触发很多事件。

有两种事件,一种是局部事件,一种是全局事件:

局部事件:通过$.ajax来调用并且分配。

$.ajax({

beforeSend: function(){

// Handle the beforeSend event

},

complete: function(){

// Handle the complete event

}

// ...

});

全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。

$("#loading").bind("ajaxSend", function(){ //使用bind

$(this).show();

}).ajaxComplete(function(){ //直接使用ajaxComplete

$(this).hide();

});

当然,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false

$.ajax({

url: "test.html",

global: false,

// ...

});

事件的顺序如下:

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,只有当异常发生时才会被传递。

我们可以利用ajaxOptions来写一个全局的ajax事件。

比如

$("#msg").beforeSend(function(e,xhr,o) {

$(this).html("正在请求"+o.url);

}).ajaxSuccess(function(e,xhr,o) {

$(this).html(o.url+"请求成功");

}).ajaxError(function(e,xhr,o) {

$(this).html(o.url+"请求失败");

});

对于这个例子,

这样我们就可以很方便的全局地在某个地方显示当前的ajax状态。

当然,之前说了,第三个参数实际上是传递给ajax的参数。get/post/load/getScript/getJSON等方法本质上都是调用ajax方法的,所以ajaxOptions.url属性总是有效的。

还有更丰富的例子。

如果你用ajax调用,还可以传递自定义参数。下面的例子我就自定义了一个msg参数给了ajax调用

//自定义参数msg

$.ajax({url:"test1.html",type:"get",msg:"页面一"});

$.ajax({url:"test2.html",type:"get",msg:"页面二"});

$.ajax({url:"test3.html",type:"get",msg:"页面三"});

$.ajax({url:"test4.html",type:"get",msg:"页面四"});

//这里就能获取到自定义参数msg。

//这可以用来区别对待不同的ajax请求。

$("#msg").beforeSend(function(e,xhr,o) {

$(this).html("正在请求"+o.msg);

}).ajaxSuccess(function(e,xhr,o) {

$(this).html(o.msg+"请求成功");

}).ajaxError(function(e,xhr,o) {

$(this).html(o.msg+"请求失败");

});

最后对于load方法,还有话说。

其他的简易ajax方法,比如get,post,getJSON等,他们的回调函数都是设置了success回调。

而只有load设置的其实是complete回调。

所以,load里设置的回调函数的参数应该有2个。

XMLHttpRequest和textStatus

但实际上也并非如此。

load的回调有三个参数

XMLHttpRequest.responseText, textStatus, XMLHttpRequest

所以,你可以在load的回调里

通过textStatus==”success”或者textStatus==”error”来判断是否调用成功。

或者用XMLHttpRequest.status属性判断是200还是404或者其他的。

这点上,我认为比普通的get/post等方法更先进。如果要单数设置每get的error是不可能的。但是设置一个全局的ajaxError其实也是不错的选择

ajax beforesend xhr对象,jQuery中Ajax事件beforesend及各参数含义(示例代码)相关推荐

  1. ajax离开页面方法,jQuery中ajax调用当前页面方法

    $.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...

  2. ajax.updater 返回值,jquery中Ajax.updater的等价物是什么?

    有使用一些方法阿贾克斯一样jQuery.ajax({...}) or $.ajax({...})除此之外还有它们的一些简化的版本太像: $.get()或jQuery.get() $.post()或jQ ...

  3. jQuery中ajax的使用(最详细)

    jQuery中ajax的使用 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 1.jQue ...

  4. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

  5. jQuery中Ajax事件beforesend及各参数含义

     Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Han ...

  6. jQuery中Ajax事件

    参考资料地址: http://docs.jquery.com/Ajax_Events Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. ...

  7. [转]Jquery中AJAX错误信息调试参考

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  8. Jquery中AJAX参数详细介绍

    转载:http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 ur ...

  9. jquery中ajax应用中的通用ajax()函数

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax应用--通用ajax函数 jquery提供了比get和post更加通用的ajax() 代码如下: $.a ...

最新文章

  1. AAAI2021论文:一个激光雷达点云的3D目标单步检测法CIA-SSD
  2. Python 连接FTP服务器并实现文件夹下载实例演示,python区分ftp目录下文件和文件夹方法,ftp目录下包含中文名问题处理
  3. java headless_使用Chrome Headless 快速实现java版数据的抓取
  4. NOI入门级:基础算法 贪心法
  5. 容器编排技术 -- 使用Vagrant本地运行Kubernetes
  6. 所谓的日常 #6 - 焚金闕董卓行兇 匿玉璽孫堅背約
  7. 图解TCPIP-传输层 TCP报文
  8. 七牛HTML 上传按钮,七牛 JSSDK 配置+常见问题
  9. indesign图片规定在左下角_InDesign如何为目录模板设置母版
  10. 情人节程序员用HTML网页表白【生日祝福】 HTML5生日祝福网页源码 HTML+CSS+JavaScript
  11. 怎么查询显卡hdmi接口版本_HDMI接口基础知识大扫盲
  12. 2021大学生笔记本电脑购买指南
  13. 中国5G SA核心网UDM
  14. 国内量化投资策略的演进方向
  15. Django实现websocket聊天室
  16. 提示https不安全的原因及解决办法
  17. 获取微信昵称时 过滤特殊字符
  18. 可路由计算引擎实现前置数据库
  19. 腾讯滑块识别-通用滑块识别
  20. 安卓逆向--凤凰新闻app简单分析

热门文章

  1. 2020年电信最便宜的套餐_中国电信推出最便宜的5G套餐,14元含10GB流量,网友却表示不看好...
  2. 自适应进化极限学习机SaDE_ELM程序源码和使用方法
  3. OPPO尝鲜android版本更新,OPPOColorOS系统国内首发安卓8.1,用户体验大升级
  4. VGGNet详细笔记
  5. 2019-03-06【午夜游乐园玩法】
  6. 第03章 成人感冒不是大事,少往急诊跑
  7. 小程序源码:图片拼图微信小程序源码下载
  8. 自制小autocomplete/tree/上传/下载/html转pdf/layer
  9. 怎么在手机上压缩PDF文件大小
  10. 怎么在图片加文字边框?这些方法值得你收藏