如何用纯JavaScript追踪特定XMLHttpRequest请求的完成状态？

当然可以实现精准追踪！你现在的代码已经搭好了全局拦截XHR请求的基础框架，只需要加上目标URL的判断逻辑，就能过滤掉无关请求，只聚焦你需要的那个。

核心思路很简单：在重写XMLHttpRequest的时候，拦截它的open方法，把当前请求的URL记录下来，之后在状态变更事件里，先判断这个URL是否和你要追踪的一致，再处理完成状态。

修改后的代码如下：

// 保存原生XMLHttpRequest构造函数
const oldXHR = window.XMLHttpRequest;

function newXHR() {
  const realXHR = new oldXHR();
  // 先保存原生的open方法，避免覆盖后丢失原生功能
  const originalOpen = realXHR.open;

  // 重写open方法，记录当前请求的URL
  realXHR.open = function(method, url) {
    // 把请求URL挂载到XHR实例上，方便后续回调里获取
    this._requestUrl = url;
    // 调用原生open方法，传递所有传入的参数
    return originalOpen.apply(this, arguments);
  };

  // 监听状态变化事件
  realXHR.addEventListener("readystatechange", function() {
    // 先判断URL是否匹配目标，再检查请求完成状态
    if (this._requestUrl === "http://www.mywebsite.com/test.json" && 
        this.readyState === 4 && 
        this.status === 200) {
      console.log('目标请求已成功完成！');
      // 这里可以添加你需要的后续处理逻辑，比如解析响应数据
    }
  }, false);

  return realXHR;
}

// 替换全局的XMLHttpRequest，让所有新请求都走我们的拦截逻辑
window.XMLHttpRequest = newXHR;

关键细节说明： #

• 我们没有直接覆盖原生open方法，而是先保存再调用，确保其他正常请求的功能不受影响
• 通过this._requestUrl把当前请求的URL绑定到XHR实例上，这样在状态回调里就能精准识别当前请求的目标地址
• 条件判断里优先检查URL匹配，再验证readyState和status，确保只处理你关心的特定请求

额外小提示： #

如果目标URL可能带有动态参数（比如test.json?id=123），你可以用正则表达式来实现更灵活的匹配规则，比如：

// 匹配以test.json结尾的URL，忽略后面的参数
const targetRegex = /test\.json(\?.*)?$/;
if (targetRegex.test(this._requestUrl) && this.readyState === 4 && this.status === 200) {
  // 处理逻辑
}

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