多次点击AJAX按钮触发异常：XMLHttpRequest状态错误求助

这个问题我之前踩过同款坑！你碰到的Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED错误，本质是重复使用了同一个XMLHttpRequest(XHR)对象导致的：第一次点击后，XHR对象完成请求进入了DONE状态，第二次点击时直接调用send()，但此时对象已经不在允许发送请求的OPENED状态，所以触发了报错。

下面给你两种简单易懂的解决方案，直接就能整合到你的脚本里：

方案1：每次点击都创建新的XHR对象（推荐） #

这是最稳妥的方式，每次调用AJAX请求时都生成一个全新的XHR对象，从根源避免状态冲突问题。修改你的sendAJAX函数如下：

function sendAJAX() {
  // 每次调用都新建一个XHR实例
  const xhr = new XMLHttpRequest();
  
  // 初始化请求（此时对象进入OPENED状态）
  xhr.open('GET', '你的请求目标URL', true);
  
  // 设置响应处理逻辑
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功后的操作，比如渲染数据
      console.log('请求成功:', xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  };
  
  // 发送请求
  xhr.send();
}

这样不管点击多少次，每次都是用全新的XHR对象，状态始终是正确的，不会出现状态不匹配的问题。

方案2：复用XHR对象，但每次发送前重置状态 #

如果你有特殊需求必须复用同一个XHR对象，那就要在每次发送请求前检查对象状态，重新调用open()方法将状态重置为OPENED，同时可以考虑终止未完成的请求避免并发问题：

// 全局声明一个XHR对象
let xhr = new XMLHttpRequest();

function sendAJAX() {
  // 如果对象不在OPENED状态，重新初始化请求
  if (xhr.readyState !== XMLHttpRequest.OPENED) {
    xhr.open('GET', '你的请求目标URL', true);
    
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log('请求成功:', xhr.responseText);
      }
    };
  }
  
  // 可选：如果上一次请求还在进行中，先终止它
  xhr.abort();
  
  // 发送请求
  xhr.send();
}

注意：复用对象时要小心并发请求的问题，abort()可以终止未完成的请求，避免多个请求同时触发导致的混乱。

总结一下，方案1实现简单、不易出错，是大多数场景下的首选；方案2适合有性能优化或特殊需求的场景。

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