JavaScript异步请求不起作用
[英]Javascript asynchronous request NOT working
问题描述
This code only works when async is set to false, why? 
此代码仅在异步设置为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";
}
}
}
I import it into a html document like so:
我将其导入到html文档中，如下所示： <head> <script type="text/javascript" src="contact.js"></script> </head>And use it like so:
并像这样使用它： <body id="para"> <script type="text/javascript"> contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt"); contact.storeData(); contact.displayData("para"); </script>
2 个解决方案
解决方案1
3 2009-10-04 03:50:28
Because it's asynchronous, it takes time to make the HTTP Request to the text file, therefore the callback contact.storeData is called AFTER contact.displayData . 因为它是异步的，所以将HTTP请求发送到文本文件需要花费时间，因此回调contact.storeData称为AFTER contact.displayData 。
The solution is to simply invoke it inside of storeData, so it fires after it makes the HTTP request to the text file and populates the txtDoc property. 解决方案是简单地在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");
}
},
Full code that works for me: 适用于我的完整代码：
<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>
解决方案2
1 2009-10-04 03:54:03
When you do this synchronously: 当您同步执行此操作时：
contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt");
contact.storeData();
contact.displayData("para");
getData is called, the request is sent and returns, getData returns after it finishes and then storeData and displayData run. 调用getData ，发送请求并返回，完成后getData返回，然后运行storeData和displayData。 When you do it async, getData starts the request and returns immediately. 异步执行时，getData启动请求并立即返回。 Then storeData and displayData are called before they are ready, so they don't work. 然后，在准备就绪之前会调用storeData和displayData，因此它们将无法工作。 The results of the request haven't returned yet. 请求的结果尚未返回。
Like meder says, to fix it, you need to do your display in the callback function. 就像meder所说的那样，要修复它，您需要在回调函数中进行显示。 That ensures the results from the request are available when displayData is run. 这样可以确保在运行displayData时，请求的结果可用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.