为什么ajax异步调用不会更改元素的innerHTML？

debugcn 发表于 Dev

布鲁诺布利斯

PLan很简单，请<li>从data.txt中获取几个。当我使用同步方法（false）时此方法有效，而当我使用默认true时则无效，这是以下代码

作品：

function change() {
    var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    ajax.open('GET','data.txt',false);
    ajax.send();
    var changeME = document.getElementById('changeMe');
    changeME.innerHTML = ajax.responseText;
}

不起作用

function change() {
    var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    ajax.open('GET','data.txt',true);
    ajax.send();
    var changeME = document.getElementById('changeMe');
    changeME.innerHTML = ajax.responseText;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="changeMe"> </div>
        <input type="button" id="lol" onclick="change();" value="Change" />
    </body>
    <script src="script.js"></script>
</html>

DATA.TXT

<li>List item 1</li>
<li>List item 2</li>

滑皮特

您需要为异步调用完成的时间设置一个处理程序，并在那里进行DOM更新：

function change() {
    var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            var changeME = document.getElementById('changeMe');
            changeME.innerHTML = ajax.responseText;
        }
    }
    ajax.open('GET', 'data.txt', true);
    ajax.send();
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。