原生JavaScript实现jQuery $(document).ajaxSend()的等效方法

核心思路是对原生XMLHttpRequest的原型方法进行包装拦截，在请求发送前触发自定义的全局处理逻辑，实现和jQuery ajaxSend一致的全局监听效果。

完整实现代码 #

// 存储所有绑定的全局ajaxSend处理函数
const globalAjaxSendHandlers = [];
// 保存原生XMLHttpRequest的原始方法
const originalXHROpen = XMLHttpRequest.prototype.open;
const originalXHRSend = XMLHttpRequest.prototype.send;

// 重写open方法，存储请求基础配置
XMLHttpRequest.prototype.open = function(method, url, async = true, user, password) {
  // 将请求配置挂载到xhr实例上，后续处理函数可以直接读取
  this._ajaxSettings = {
    url: url,
    method: method.toUpperCase(),
    async: async,
    user: user,
    password: password
  };
  // 调用原始open方法，保证原有逻辑正常执行
  return originalXHROpen.apply(this, arguments);
};

// 重写send方法，在请求发送前触发所有绑定的处理函数
XMLHttpRequest.prototype.send = function(data) {
  // 把请求体也补充到配置里
  if (this._ajaxSettings) {
    this._ajaxSettings.data = data;
  }
  // 依次触发所有绑定的全局处理函数，参数和jQuery ajaxSend对齐
  globalAjaxSendHandlers.forEach(handler => {
    // 参数顺序：模拟事件对象、xhr实例、请求配置，和jQuery ajaxSend参数对应
    handler({ type: 'ajaxSend' }, this, this._ajaxSettings || {});
  });
  // 调用原始send方法，发起真实请求
  return originalXHRSend.apply(this, arguments);
};

// 对外暴露绑定处理函数的方法，用法和jQuery $(document).ajaxSend(handler)一致
function addAjaxSendHandler(handler) {
  if (typeof handler === 'function') {
    globalAjaxSendHandlers.push(handler);
  }
}

使用示例 #

和jQuery的用法逻辑完全对齐：

// 绑定全局处理函数，所有AJAX请求发送前都会触发
addAjaxSendHandler(function(event, xhr, settings) {
  console.log('即将发送AJAX请求：', settings.method, settings.url);
  // 可以在这里加通用逻辑，比如统一加请求头、统一添加签名参数、请求日志上报等
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
});

注意事项 #

• 上述方案仅拦截基于XMLHttpRequest发起的AJAX请求，如果你的项目中使用了fetch API发起请求，需要额外对window.fetch做类似的包装拦截。
• 可以根据业务需要扩展_ajaxSettings里的配置项，比如读取请求头、超时配置等。
• 如果需要移除绑定的处理函数，可以额外扩展对应的移除方法，遍历globalAjaxSendHandlers数组删除对应函数即可。

内容的提问来源于stack exchange，提问作者maxence51