来自 XMLHttpRequest 的 ResponseString 显示在警报中，但不在 div 中答案

【问题标题】：ResponseString from XMLHttpRequest displays in alert but not in div来自 XMLHttpRequest 的 ResponseString 显示在警报中，但不在 div 中
【发布时间】：2015-01-04 03:38:19
【问题描述】：

所以我是新手，并尝试使用以下代码将请求的输出显示为 div：

<div id="myDiv"></div>
<button onclick="myFunction()">Try it</button> //button to test requeststring in alert box

<script>
function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  xhr.send();
  return xhr;
}

var url = 'http://www.bea.gov/api/data/?&XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
var xhr = createCORSRequest('GET', url);

document.getElementById("myDiv").innerHTML=xhr.responseText;

function myFunction() {
    alert(document.getElementById(xhr.responseText);
}
</script>

单击测试按钮时，警报会正确显示 responseText。然而。我无法使用 document.getElementById("myDiv").innerHTML=xhr.responseText 在我的 div 中显示此文本；线？后者有什么解决方案吗？

【问题讨论】：

标签： javascript html ajax xml

【解决方案1】：

这是因为 AJAX 是异步的（因此缩写为 Asynchronous JavaScript And XML） . XMLHttpRequest 对象的 responseText 属性不会立即可用，因为它会向服务器创建一个添加请求，必须先完成该请求才能访问响应。您需要使用 onreadystatechange 事件侦听器等待 readyState 变为 4。

下面是一个示例，说明如何通过修改您的 createCORSRequest 函数以具有在 AJAX 请求完成时调用的回调函数来实现此目的。

<div id="myDiv"></div>
<button onclick="myFunction()">Try it</button> //button to test requeststring in alert box

<script>
function createCORSRequest(method, url, complete){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4) {
          complete(xhr);
      }
  };
  xhr.send();
  return xhr;
}

var url = 'http://www.bea.gov/api/data/?&XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
createCORSRequest('GET', url, function(){
    document.getElementById("myDiv").innerHTML=xhr.responseText;
});
</script>

【讨论】：