客户端如何获取请求的响应体内容？

你代码的核心问题是在请求还未完成时就尝试读取响应内容。因为你开启的是异步请求（open方法第三个参数为true），xhr.send()调用后代码会继续执行，此时服务器还没返回数据，所以response、responseText这些属性自然是空的。

需要通过监听请求的完成事件，在服务器返回数据后再读取响应内容，以下是两种常用实现方式：

方式1：监听load事件（推荐） #

load事件会在请求成功完成后触发，此时可以安全读取响应内容：

var xhr = new XMLHttpRequest();
xhr.open(signedRequest.method, signedRequest.url, true);

// 绑定请求完成后的处理逻辑
xhr.addEventListener('load', function() {
  // 先判断请求是否成功（状态码200-299表示成功）
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('xhr.response: ', xhr.response);
    console.log('xhr.responseText: ', xhr.responseText);
    console.log('xhr.responseXML: ', xhr.responseXML);
    document.write('<p>响应内容: ' + xhr.responseText + '</p>');
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
});

xhr.send();

方式2：监听readystatechange事件 #

通过判断readyState是否为4（表示请求已完成），同时验证状态码是否正常：

var xhr = new XMLHttpRequest();
xhr.open(signedRequest.method, signedRequest.url, true);

xhr.onreadystatechange = function() {
  // readyState=4 表示请求已完成，状态码200-299表示请求成功
  if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
    console.log('xhr.responseText: ', xhr.responseText);
    document.write('<p>响应内容: ' + xhr.responseText + '</p>');
  } else if (xhr.readyState === 4) {
    console.error('请求失败，状态码:', xhr.status);
  }
};

xhr.send();

• 不建议使用同步请求（将open第三个参数设为false），这种方式会阻塞页面渲染，导致用户操作无响应。
• 请确认signedRequest.method（如GET/POST）和signedRequest.url的有效性，确保后端接口能正常返回HTML内容。

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