XHR请求返回200但alert弹出响应为空的技术求助

嘿，作为JavaScript新手，踩这个坑太正常啦😉 你的代码核心问题是：XMLHttpRequest默认是异步执行的，你在调用xhr.send()之后立刻就执行alert()，这时候请求还没来得及完成，服务器的响应还没返回，所以xhr.response和xhr.responseText自然是空的。

举个通俗的例子：就像你在网上下单买东西，刚点击“提交订单”就跑去快递柜取件——这时候快递根本还没到，柜子里当然是空的啦！你得等快递员通知你“快递到了”，再去取件才行。

怎么修改？ #

你需要给XMLHttpRequest绑定一个请求完成的事件监听，等请求真正完成、响应已经返回的时候，再去获取并弹窗显示响应内容。推荐用更简洁的onload事件：

<!DOCTYPE html>
<html lang="en">
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://website.com/page", true);
xhr.withCredentials = true;

// 关键：监听请求完成事件，在事件处理函数里获取响应
xhr.onload = function() {
  // 请求成功完成时才执行这里的代码
  if (xhr.status === 200) { // 确认状态码是200（成功）
    alert(xhr.responseText); // 现在就能拿到响应内容啦
  } else {
    alert('请求出错，状态码：' + xhr.status);
  }
};

xhr.send();
</script>
</body>
</html>

补充说明： #

• onload事件会在请求成功完成后触发，这时候xhr.responseText已经包含了服务器返回的内容。
• 如果你想兼容更老的浏览器，也可以用onreadystatechange事件，判断xhr.readyState === 4（请求完成）且xhr.status === 200：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert(xhr.responseText);
  }
};

• 另外，你设置了withCredentials = true，要确保目标服务器的CORS配置允许携带凭证，不过你说Network里能看到响应内容，这部分应该没问题~

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