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控制台中的时间内具有。

您需要设置内的HTML onload事件：

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; 
}