理解jQuery全局AJAX事件与触发元素识别的挑战
jquery提供了一套强大的全局ajax事件，如 ajaxsend、ajaxcomplete、ajaxsuccess 和 ajaxerror，允许开发者在不修改每个具体ajax调用的情况下，对网站上的所有ajax请求进行统一的监听和处理。这对于实现全局加载指示器、错误日志记录或安全令牌刷新等功能非常有用。
然而，在使用这些全局事件时，一个常见的挑战是如何识别触发特定AJAX请求的原始DOM元素。例如，当您希望只对表单提交触发的AJAX请求执行特定操作时，会发现事件对象 e.target 通常指向 document，这使得直接通过 e.target 来判断请求来源变得不可行。
以下代码示例展示了这种局限性：
$(document).on("ajaxSend", function (e, request, settings) {
console.log("AJAX请求发送");
console.log("事件目标:", e.target); // 通常是 'document'
}).on("ajaxComplete", function (e) {
console.log("AJAX请求完成");
}).on("ajaxSuccess", function (e) {
console.log("AJAX请求成功");
}).on("ajaxError", function (e) {
console.log("AJAX请求失败");
});上述代码会捕获所有AJAX请求，但无法在 ajaxSend 回调中直接获取到触发请求的 <form> 元素。
核心解决方案：通过自定义Ajax选项关联触发元素
解决这一问题的关键在于利用 $.ajax() 方法的 settings 对象。当您调用 $.ajax() 发送请求时，可以向其 settings 对象添加任何自定义属性。这些自定义属性随后会在全局AJAX事件的回调函数中，通过 settings 参数被访问到。
实现步骤：
在发起AJAX请求时注入元素引用： 当您通过自己的代码手动发起 $.ajax() 请求时（例如，在表单提交事件中），可以在 settings 对象中添加一个自定义属性，比如 element，并将其值设置为触发请求的DOM元素（例如 this）。
在全局AJAX事件中识别触发元素： 在 ajaxSend、ajaxComplete 等全局事件的回调函数中，检查传入的 settings 参数是否包含您自定义的 element 属性。如果存在，则说明该请求是由您指定了该属性的元素触发的。
示例代码
步骤一：在触发请求时注入元素引用
假设我们有一个带有 data-ajax="true" 属性的表单，我们希望在它提交时，手动通过 $.ajax() 发送数据，并关联该表单元素。
// 监听特定表单的提交事件
$(document).on("submit", "form[data-ajax=true]", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
const $form = $(this); // 获取当前提交的表单元素
$.ajax({
url: $form.attr("action"), // 从表单的action属性获取URL
method: $form.attr("method") || "GET", // 从表单的method属性获取请求方法
data: $form.serialize(), // 序列化表单数据
element: this, // 关键步骤：将当前表单元素作为自定义属性传入
dataType: "json", // 假设期望返回JSON数据
beforeSend: function() {
// 可以在此处执行表单特定的预处理，例如显示加载动画
$form.find(":submit").prop("disabled", true).text("提交中...");
},
success: function(response) {
console.log("表单提交成功:", response);
// 处理成功响应，例如更新UI
},
error: function(xhr, status, error) {
console.error("表单提交失败:", error);
// 处理错误响应
},
complete: function() {
// 无论成功或失败，都在此处恢复表单状态
$form.find(":submit").prop("disabled", false).text("提交");
}
});
});步骤二：在全局Ajax事件中识别触发元素
现在，我们可以在全局AJAX事件中，通过检查 settings.element 来判断请求是否由我们注入的特定表单触发。
$(document).on({
ajaxSend: function(e, request, settings) {
if (settings.element) {
console.log("AJAX请求由特定元素触发:", settings.element);
// 可以在这里对特定元素触发的请求进行特殊处理
// 例如，统一显示加载指示器，或对特定元素执行全局操作
// $(settings.element).addClass("is-loading");
} else {
console.log("AJAX请求由非特定元素触发 (或第三方库触发)");
}
},
ajaxComplete: function(e, request, settings) {
if (settings.element) {
console.log("AJAX请求完成，触发元素:", settings.element);
// 请求完成后恢复元素状态
// $(settings.element).removeClass("is-loading");
}
},
ajaxSuccess: function(e, request, settings) {
if (settings.element) {
console.log("AJAX请求成功，触发元素:", settings.element);
}
},
ajaxError: function(e, request, settings) {
if (settings.element) {
console.log("AJAX请求失败，触发元素:", settings.element);
// 针对特定元素触发的错误进行处理
}
}
});通过这种方式，我们成功地将特定的DOM元素与全局AJAX事件关联起来，从而在全局回调中能够精确地识别和操作触发请求的元素。
重要注意事项
适用范围限制： 此方法仅适用于您自己的代码中明确调用 $.ajax() 并能够控制其 settings 对象的情况。这意味着您必须手动编写或封装AJAX请求，才能注入 element 这样的自定义属性。
-
第三方库的挑战： 此方案不适用于由第三方JavaScript库（如 jquery.unobtrusive-ajax.js、某些前端框架或插件）触发的AJAX请求。这些库通常会在内部调用 $.ajax()，但您无法直接修改它们的源代码以注入自定义的 element 属性到 settings 对象中。对于这类场景，您可能需要：
- 查阅第三方库的文档，看它是否提供了自己的钩子或事件来在AJAX请求前后进行干预。
- 如果库提供了自定义事件，可以监听这些事件来获取更多上下文信息。
- 在极少数情况下，如果实在无法通过库提供的API解决，可能需要考虑更复杂的DOM事件监听或猴子补丁（不推荐，易引入维护问题）。
总结
在jQuery全局AJAX事件中识别触发请求的DOM元素是一个常见需求。通过向 $.ajax() 的 settings 对象注入自定义属性（例如 element: this），我们可以在 ajaxSend、ajaxComplete 等全局回调中有效地关联并识别由我们自身代码发起的AJAX请求的来源。然而，理解并接受此方法在处理第三方库时存在的局限性至关重要。对于无法控制 $.ajax() 调用的场景，应优先寻求第三方库自身提供的扩展点或事件机制。
