JavaScript異步請求不起作用

Question

此代碼僅在異步設置為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>

Answer 1

因為它是異步的，所以將HTTP請求發送到文本文件需要花費時間，因此回調contact.storeData稱為AFTER 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>

Answer 2

當您同步執行此操作時：

contact.getData("http://localhost/~olatunjigbadamosi/Books/contact.txt");
contact.storeData();
contact.displayData("para");

調用getData ，發送請求並返回，完成后getData返回，然后運行storeData和displayData。 異步執行時，getData啟動請求並立即返回。 然后，在准備就緒之前會調用storeData和displayData，因此它們將無法工作。 請求的結果尚未返回。

就像meder所說的那樣，要修復它，您需要在回調函數中進行顯示。 這樣可以確保在運行displayData時，請求的結果可用。

JavaScript異步請求不起作用

問題描述

2 個解決方案

解決方案1
3 2009-10-04 03:50:28

解決方案2
1 2009-10-04 03:54:03

JavaScript異步請求不起作用

問題描述

2 個解決方案

解決方案1 3 2009-10-04 03:50:28

解決方案2 1 2009-10-04 03:54:03

解決方案1
3 2009-10-04 03:50:28

解決方案2
1 2009-10-04 03:54:03