原创

JQuery 中 Ajax 事件及各个参数的含义

前言

页面请求中经常会用到 AJax,里面也有很多的事件,可能很多人没有去看它,
今天给大家详细的说一下里面的事件以及用法含义,我觉得有些还是挺有用的。



有两种事件,一种是局部事件,一种是全局事件:
局部事件:通过 $.ajax 来调用并且分配。
$.ajax({
beforeSend: function(){
// 请求开始前触发这个
},
complete: function(){
// 不管是请求失败还是成功都会触发这个
}
});
全局事件,可以用 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 其实也是不错的选择。

API:http://api.jquery.com/Ajax_Events/

后端
  • 泽泽泽
  • 2020-11-05 10:41:17.198

评论区