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

Question

所以我是新手，正在尝试使用以下代码将请求的输出显示为 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>

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

Answer 1

这是因为 AJAX 是异步的（因此首字母缩写词 A同步 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>

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

ResponseString from XMLHttpRequest displays in alert but not in div

javascript

html

ajax

xml