此代码仅在 async 设置为 false 时有效，为什么？
var contact =
{
XMLHttp : null,
XMLDoc : null,
TXTDoc : null,
getData : function(dataSource)
{
contact.XMLHttp = new XMLHttpRequest();
contact.XMLHttp.open("GET", dataSource, false);
contact.XMLHttp.onreadystatechange = contact.storeData;
contact.XMLHttp.send(null);
},
storeData : function()
{
if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200)
{
contact.XMLDoc = contact.XMLHttp.responseXML;
contact.TXTDoc = contact.XMLHttp.responseText;
}
},
displayData : function(elementID)
{
if(contact.TXTDoc != null)
document.getElementById(elementID).innerHTML = contact.TXTDoc;
else{
document.getElementById(elementID).innerHTML = "can't do it";
}
}
}
我将其导入到 html 文档中，如下所示:
<head> <script type="text/javascript" src="contact.js"></script> </head>像这样使用它:
<body id="para"> <script type="text/javascript"> contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt"); contact.storeData(); contact.displayData("para"); </script>
最佳答案
由于它是异步的，因此向文本文件发出 HTTP 请求需要时间，因此回调 contact.storeData 在 contact.displayData 之后调用。
解决方案是简单地在 storeData 内部调用它，这样它就会在向文本文件发出 HTTP 请求并填充 txtDoc 属性后触发。
storeData : function()
{
if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200)
{
contact.XMLDoc = contact.XMLHttp.responseXML;
contact.TXTDoc = contact.XMLHttp.responseText;
contact.displayData("para");
}
},
适合我的完整代码:
<p id="para"></p>
<button id="foo">go</button>
<script>
var contact =
{
XMLHttp : null,
XMLDoc : null,
TXTDoc : null,
getData : function(dataSource)
{
contact.XMLHttp = new XMLHttpRequest();
contact.XMLHttp.open("GET", dataSource, true);
contact.XMLHttp.onreadystatechange = contact.storeData;
contact.XMLHttp.send(null);
},
storeData : function()
{
if(contact.XMLHttp.readyState == 4 && contact.XMLHttp.status == 200)
{
contact.XMLDoc = contact.XMLHttp.responseXML;
contact.TXTDoc = contact.XMLHttp.responseText;
contact.displayData("para");
}
},
displayData : function(elementID)
{
if(contact.TXTDoc != null)
document.getElementById(elementID).innerHTML = contact.TXTDoc;
else{
document.getElementById(elementID).innerHTML = "can't do it";
}
}
},
button = document.getElementById('foo');
button.onclick = function() {
contact.getData("http://localhost/file.txt");
contact.storeData();
};
</script>
关于Javascript 异步请求不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1515528/