源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

浅谈jQuery中Ajax事件beforesend及各参数含义

  • 时间:2022-09-12 22:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:浅谈jQuery中Ajax事件beforesend及各参数含义
Ajax会触发很多事件。 [b]有两种事件,一种是局部事件,一种是全局事件: [/b] [b]局部事件:[/b]通过$.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,
// ...
});
[b]事件的顺序如下:[/b] [b]ajaxStart 全局事件 [/b]开始新的Ajax请求,并且此时没有其他ajax请求正在进行。 [b]beforeSend 局部事件 [/b]当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。 [b]ajaxSend 全局事件 [/b]请求开始前触发的全局事件 [b]success 局部事件 [/b]请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。 [b]ajaxSuccess 全局事件 [/b]全局的请求成功 [b]error 局部事件 [/b]仅当发生错误时触发。你无法同时执行success和error两个回调函数。 [b]ajaxError 全局事件 [/b]全局的发生错误时触发 [b]complete 局部事件 [/b]不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。 [b]ajaxComplete 全局事件 [/b]全局的请求完成时触发 [b]ajaxStop 全局事件 [/b]当没有Ajax正在进行中的时候,触发。 局部事件回调的参数在文档中写的很清楚了,这里就不累述了。 全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3个参数 event, XMLHttpRequest, ajaxOptions 第一个是事件,第二个是XHR对象,第三个参数最有用,是当时调用这个ajax的时候的参数。 对于ajaxError,还有第四个参数thrownError,只有当异常发生时才会被传递。 我们可以利用ajaxOptions来写一个全局的ajax事件。 [b]比如[/b]
$("#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 但实际上也并非如此。 [b]load的回调有三个参数[/b] XMLHttpRequest.responseText, textStatus, XMLHttpRequest 所以,你可以在load的回调里 通过textStatus==”success”或者textStatus==”error”来判断是否调用成功。 或者用XMLHttpRequest.status属性判断是200还是404或者其他的。 这点上,我认为比普通的get/post等方法更先进。如果要单数设置每get的error是不可能的。但是设置一个全局的ajaxError其实也是不错的选择 以上这篇浅谈jQuery中Ajax事件beforesend及各参数含义就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部