InnerHTML更新无效

Question

xmlHttp = new XMLHttpRequest(); 
xmlHttp.open( "GET", "myurlhere.php", true );
xmlHttp.send();
var display = document.getElementById("display");
display.innerHTML = xmlHttp.response;

这是我的代码。此代码是单击按钮时执行的函数的一部分。它确实做了AJAX请求，但是innerHTML没有更新。这里真的很奇怪。我进入浏览器，转到JS控制台，然后输入display.innerHTML = xmlHttp.response;。然后它更新。我制作了第二个按钮，display.innerHTML = xmlHttp.response;作为onclick事件......然后它发生了。但是，如果我把它作为第一个按钮的onclick事件的第二行？没运气。我该如何解决这个令人困惑的问题？

Answer 1

这是因为xmlHttp是异步的。您需要在响应到达后 进行 修改。它在js控制台中输入的持续时间。

您需要在onload事件中设置内部html：

xmlHttp = new XMLHttpRequest(); 
xmlHttp.open( "GET", "myurlhere.php", true );
xmlHttp.onload = function(e) {
  var display = document.getElementById("display");
  display.innerHTML = xmlHttp.response;  
}
xmlHttp.send();

Answer 2

您正在传递true以异步方式发送。这意味着在等待您的响应时正在执行其余代码。换句话说，在从服务器实际获取数据之前，您正试图将数据插入到html中。因此，一旦获得数据，您需要一个回调来启动：

xmlHttp.onload=function(e) {
    document.getElementById('display').innerHTML=xmlHttp.responseText;  
}