Javascript XMLHttpRequest的ResponseString显示在alert中，但不显示在div中

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

尝试使用//按钮测试警报框中的requeststring
函数createCORSRequest（方法，url）{
var xhr=new XMLHttpRequest（）；
如果（xhr中的“带凭证”）{
open（方法、url、true）；
}else if（XDomainRequest的类型！=“未定义”）{
xhr=新的XDomainRequest（）；
open（方法，url）；
}否则{
xhr=null；
}
xhr.send（）；
返回xhr；
}
var url='1〕http://www.bea.gov/api/data/?&XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
var xhr=createCORSRequest（'GET'，url）；
document.getElementById（“myDiv”）.innerHTML=xhr.responseText；
函数myFunction（）{
警报（document.getElementById（xhr.responseText）；
}

---

单击测试按钮时，警报会正确显示responseText。但是，我无法使用document.getElementById（“myDiv”）在我的div中显示此文本。innerHTML=xhr.responseText；line？有任何解决方案可以执行后一种操作吗？

这是因为AJAX是异步的（因此缩写为AsynchronousJavaScriptAndXML）。对象的

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>

尝试使用//按钮测试警报框中的requeststring
函数createCORSRequest（方法、url、完成）{
var xhr=new XMLHttpRequest（）；
如果（xhr中的“带凭证”）{
open（方法、url、true）；
}else if（XDomainRequest的类型！=“未定义”）{
xhr=新的XDomainRequest（）；
open（方法，url）；
}否则{
xhr=null；
}
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
完成（xhr）；
}
};
xhr.send（）；
返回xhr；
}
var url='1〕http://www.bea.gov/api/data/?&XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
createCORSRequest（'GET'，url，function（））{
document.getElementById（“myDiv”）.innerHTML=xhr.responseText；
});