Javascript асинхронный запрос не работает - PullRequest
Новая
       8

Javascript асинхронный запрос не работает

0 голосов
/ 04 октября 2009

Этот код работает, только когда 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>

Ответы [ 2 ]

3 голосов
/ 04 октября 2009

Поскольку он асинхронный, для отправки 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>
1 голос
/ 04 октября 2009

Когда вы делаете это синхронно: 

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

getData вызывается, запрос отправляется и возвращается, getData возвращается после его завершения, а затем запускаются storeData и displayData. Когда вы делаете это асинхронно, getData запускает запрос и немедленно возвращается. Затем storeData и displayData вызываются до того, как они готовы, поэтому они не работают. Результаты запроса еще не возвращены.

Как говорит медер, чтобы исправить это, вам нужно сделать отображение в функции обратного вызова. Это обеспечивает доступность результатов запроса при запуске displayData.

...