jQuery Ajax中的事件详细介绍


Posted in Javascript onApril 16, 2015

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其实也是不错的选择。

Javascript 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
JavaScript实现页面5秒后自动跳转的方法
Apr 16 #Javascript
JavaScript实现随机替换图片的方法
Apr 16 #Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 #Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 #Javascript
jquery插件bxslider用法实例分析
Apr 16 #Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 #Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 #Javascript
You might like
PHP Google的translate API代码
2008/12/10 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
javascript连续赋值问题
2015/07/08 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python如何将模块打包并发布
2020/08/30 Python
关于python中导入文件到list的问题
2020/10/31 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
文明倡议书范文
2014/04/15 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
继续教育个人总结
2015/03/03 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang