jQuery Ajax 事件详解：局部与全局触发机制及参数解析

jQuery Ajax 事件概述与分类

Ajax 请求在执行过程中会触发一系列事件。

这些事件主要分为两类：局部事件和全局事件。

局部事件是通过 $.ajax 方法调用时直接配置并分配的。

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件则可以通过 bind 方法进行绑定，并使用 unbind 取消绑定，其机制与 click、mousedown、keyup 等常规 DOM 事件类似，但它可以传递并作用于每一个 DOM 元素。

$("#loading").bind("ajaxSend", function(){ //使用bind
  $(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
  $(this).hide();
});

如果某个特定的 Ajax 请求不需要触发全局事件，可以在配置中设置 global: false。

$.ajax({
url: "test.html",
global: false,
// ...
});

Ajax 事件触发顺序详解

Ajax 事件的触发顺序如下：

ajaxStart 全局事件：当发起新的 Ajax 请求，且当前没有其他 Ajax 请求正在执行时触发。

beforeSend 局部事件：在 Ajax 请求正式发送前触发。在此处可以获取并设置 XHR（XMLHttpRequest）对象。

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 方法，还可以传递自定义参数。在下面的示例中，我为 ajax 调用自定义了一个 msg 参数：

//自定义参数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 方法回调参数的特殊性

最后，关于 load 方法还有补充说明。

其他简易 Ajax 方法（如 get、post、getJSON 等）的回调函数实际上都是设置了 success 回调。

唯独 load 方法设置的是 complete 回调。

因此，load 方法中设置的回调函数预期接收 2 个参数。

这两个参数是 XMLHttpRequest 和 textStatus。

但实际上，情况并非如此简单。

load 的回调函数实际上接收三个参数。

这三个参数依次是：XMLHttpRequest.responseText、textStatus 和 XMLHttpRequest。

因此，在 load 的回调函数中：

可以通过判断 textStatus 等于 “success” 或 “error” 来确定调用是否成功。

或者通过 XMLHttpRequest.status 属性判断状态码是 200、404 还是其他值。

从这个角度看，load 方法比普通的 get/post 等方法更为先进。如果要单独为每个 get 请求设置 error 处理是不可能的，但设置一个全局的 ajaxError 也是一个不错的选择。

以上关于 jQuery 中 Ajax 事件 beforeSend 及各参数含义的解析就是全部内容，希望能对大家有所帮助，也希望大家多多支持本站。