JavaScript如何全局监听所有Ajax请求事件？

在Web开发中，Ajax技术是实现异步数据交互的核心，而监听和管理Ajax请求则是调试、性能优化和错误处理的重要手段，本文将系统介绍JavaScript中监听全部Ajax请求事件的多种方法，涵盖原生JavaScript、jQuery库以及现代Fetch API的拦截方案,帮助开发者根据实际需求选择合适的实现方式。

原生XMLHttpRequest的覆盖监听

XMLHttpRequest（XHR）是传统Ajax请求的基础对象，通过覆盖其原型方法可以实现全局监听，具体思路是重写open和send方法，在请求发送前后注入自定义逻辑,以下是实现步骤：

保存原始的XMLHttpRequest.prototype.open和XMLHttpRequest.prototype.send方法：

const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

重写open方法，记录请求的URL、方法和异步标志：

XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
  this._requestConfig = { method, url, async, user, password };
  originalOpen.call(this, method, url, async, user, password);
};

重写send方法，在请求前后触发自定义事件,并监听响应状态：

XMLHttpRequest.prototype.send = function(data) {
  const { method, url } = this._requestConfig;
  // 请求发送前触发
  console.log(`Request started: ${method} ${url}`);
  // 监听响应完成事件
  this.addEventListener('load', function() {
    console.log(`Request completed: ${method} ${url}, Status: ${this.status}`);
  });
  // 监听错误事件
  this.addEventListener('error', function() {
    console.error(`Request failed: ${method} ${url}`);
  });
  originalSend.call(this, data);
};

这种方法的优势在于无需依赖外部库，兼容性较好（支持IE7+），但缺点是无法拦截同源策略限制的跨域请求,且需要手动处理请求和响应的详细信息。

jQuery的Ajax全局事件监听

jQuery作为广泛使用的JavaScript库，提供了完善的Ajax全局事件机制，通过$(document).ajaxStart()、$(document).ajaxComplete()等方法可以监听所有Ajax请求的生命周期事件,以下是常用全局事件及其触发时机：

1. ajaxStart：第一个Ajax请求开始时触发；
2. ajaxSend：每个Ajax请求发送前触发；
3. ajaxSuccess：Ajax请求成功完成时触发；
4. ajaxError：Ajax请求失败时触发；
5. ajaxComplete：每个Ajax请求完成时触发（无论成功或失败）；
6. ajaxStop：所有Ajax请求结束时触发。

示例代码：

$(document).ajaxStart(function() {
  console.log('Ajax request started');
});
$(document).ajaxSend(function(event, jqXHR, settings) {
  console.log('Sending request to:', settings.url);
});
$(document).ajaxSuccess(function(event, jqXHR, settings, data) {
  console.log('Request succeeded:', settings.url, 'Response:', data);
});
$(document).ajaxError(function(event, jqXHR, settings, error) {
  console.error('Request failed:', settings.url, 'Error:', error);
});
$(document).ajaxComplete(function(event, jqXHR, settings) {
  console.log('Request completed:', settings.url);
});
$(document).ajaxStop(function() {
  console.log('All Ajax requests finished');
});

jQuery的Ajax全局事件的优势是使用简单，事件类型全面，且能自动处理不同类型的请求（如$.ajax、$.get、$.post等），但缺点是需要引入jQuery库,对于轻量级项目可能不够灵活。

Fetch API的拦截方案

现代浏览器广泛采用Fetch API替代XMLHttpRequest，其基于Promise的设计更符合现代JavaScript开发模式，Fetch API本身不提供直接的全局监听方法，需要通过重写fetch函数或使用Service Worker实现拦截。

1 重写fetch函数

通过覆盖window.fetch方法,可以在请求发送前和响应返回时插入自定义逻辑：

const originalFetch = window.fetch;
window.fetch = function(input, init) {
  const url = typeof input === 'string' ? input : input.url;
  const method = init?.method || 'GET';
  console.log(`Fetch request started: ${method} ${url}`);
  return originalFetch.call(this, input, init)
    .then(response => {
      // 克隆响应对象，避免流被消耗
      const clonedResponse = response.clone();
      console.log(`Fetch request succeeded: ${method} ${url}, Status: ${response.status}`);
      // 可在此处读取响应内容
      clonedResponse.text().then(body => {
        console.log('Response body:', body);
      });
      return response;
    })
    .catch(error => {
      console.error(`Fetch request failed: ${method} ${url}, Error:`, error);
      throw error;
    });
};

2 使用Service Worker拦截

Service Worker是运行在浏览器后台的脚本，可以拦截网络请求，适用于更复杂的场景（如PWA应用），通过在Service Worker中监听fetch事件,可以实现全局Ajax请求拦截：

// 在Service Worker中
self.addEventListener('fetch', function(event) {
  const url = event.request.url;
  const method = event.request.method;
  console.log(`Service Worker intercepting: ${method} ${url}`);
  // 可以修改请求或返回自定义响应
  event.respondWith(
    fetch(event.request)
      .then(response => {
        console.log(`Request succeeded: ${method} ${url}`);
        return response;
      })
      .catch(error => {
        console.error(`Request failed: ${method} ${url}`);
        return new Response('Network error', { status: 500 });
      })
  );
});

Fetch API拦截方案的优势是支持现代Promise语法，可扩展性强，但兼容性较差（不支持IE），且Service Worker需要HTTPS环境（localhost除外）。

综合对比与选择建议

在实际开发中，如果项目需要兼容旧浏览器且不引入额外库，可选择原生XHR覆盖；如果已使用jQuery，全局事件是最便捷的选择；对于现代Web应用，Fetch API重写或Service Worker拦截则是更优方案，需要注意跨域请求的限制,确保监听方法符合浏览器安全策略。

注意事项

1. 性能影响：全局监听会增加请求处理的复杂度，建议仅在调试或开发阶段启用,生产环境中可移除或通过开关控制；
2. 跨域限制：同源策略会阻止跨域请求的监听，除非服务器设置了CORS（跨域资源共享）；
3. 错误处理：确保监听逻辑不会影响原有请求的错误处理,避免重复捕获异常；
4. 兼容性测试：不同浏览器对XHR、Fetch API的支持可能存在差异,需进行充分测试。

通过合理选择和实现Ajax请求监听方法，开发者可以更高效地调试代码、优化性能,并提供更好的用户体验。