如何正确使用 XMLHttpRequest 发送异步 POST 请求并处理响应

本文详解 xmlhttprequest 异步请求中“响应为空”的根本原因——未等待请求完成就直接读取 responsetext，并提供基于事件监听的正确写法，同时对比推荐更现代、简洁的 fetch api 实现方案。

你遇到的问题非常典型：在 xmlhttp.send() 后立即访问 xmlhttp.responseText，却得到空字符串——这不是浏览器 Bug，而是对异步执行机制的误解。XMLHttpRequest 默认以异步方式运行（第三个参数为 true），send() 调用后会立刻返回，而服务器响应可能几毫秒甚至几百毫秒后才到达。此时 responseText 尚未被赋值，强行读取自然为空。

而 alert() “凑巧”让代码暂停执行，给了网络请求足够时间完成，因此看似“有效”，实则是不可靠的竞态陷阱。

✅ 正确做法是：通过事件监听器，在响应就绪后再操作 DOM。关键使用 load 事件（等价于 readystatechange 且 readyState === 4 && status === 200）：

function submit_cost_code() {
  const costCode = document.getElementById("cost-code").value;
  const xhr = new XMLHttpRequest();
  const url = 'process-cost-code.php';
  const params = 'cost-code=' + encodeURIComponent(costCode); //
 ✅ 防止特殊字符破坏参数

  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // ✅ 在 send 前注册 load 事件处理器
  xhr.addEventListener('load', function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      document.getElementById("feedback").innerHTML = xhr.responseText;
    } else {
      document.getElementById("feedback").innerHTML = 
        `请求失败：${xhr.status} ${xhr.statusText}`;
    }
  });

  // ✅ 错误处理同样重要
  xhr.addEventListener('error', () => {
    document.getElementById("feedback").innerHTML = "网络请求失败，请检查连接";
  });

  xhr.send(params);
}

? 注意事项：

• 永远在 send() 前绑定事件监听器，否则可能错过事件；
• 使用 encodeURIComponent() 对参数值编码，避免空格、&、= 等导致提交异常；
• 检查 xhr.status 确保 HTTP 状态码正常（如 200），而非仅依赖 responseText 是否非空；
• 添加 error 事件监听，覆盖网络中断、跨域拒绝等场景。

? 更推荐：使用现代 fetch() API（兼容性良好，Chrome 42+/Firefox 39+/Edge 14+）：

function submit_cost_code() {
  const costCode = document.getElementById("cost-code").value;
  const formData = new FormData();
  formData.append('cost-code', costCode);

  fetch('process-cost-code.php', {
    method: 'POST',
    body: formData // ✅ 自动设置 Content-Type 为 multipart/form-data
    // 若需 application/x-www-form-urlencoded，可改用：
    // body: new URLSearchParams(formData).toString()
  })
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.text();
  })
  .then(text => {
    document.getElementById("feedback").innerHTML = text;
  })
  .catch(err => {
    document.getElementById("feedback").innerHTML = 
      `提交失败：${err.message}`;
  });
}

? 总结：异步 ≠ “自动等待”。无论使用 XMLHttpRequest 还是 fetch，都必须通过回调（事件/.then()）在响应就绪后处理数据。抛弃 alert() 作为“延迟技巧”，转而拥抱事件驱动或 Promise 链，才能写出健壮、可维护的前端交互逻辑。