Javascript 没有正确执行程序

Question

我正在尝试使用 JavaScript 来操纵我正在构建的虚拟网页中的页面内容。

为此，我编写了一个名为 writeText(file_name, location) 的小函数获取由文件名指定的 HTML 文件，并将该文件的内容打印到 innerHTML一对 <div> id 属性对应于 location 的标签字段。

然后我将调用包装在其他函数中以自动构建像这样的完整页面。

所以我调用如下所示的东西:

function displayHome() {
    writeText('homeMain.html', 'mainFrame');
    writeText('homeSide.html', 'sideFrame');
}

...显示主页。

但是，当我调用这个函数时，显示只更新 'sideFrame'对象并且不对 'mainFrame' 的内容进行任何更改.但是，如果我在两个 writeText() 之间用 alert("Dummy") 中断函数调用，然后两个 contentFrames 都会正确更新。

我想知道是否有人以前见过类似的东西，是否有人知道如何修复它。

为了完整起见(这是从 w3schools 网站几乎逐字复制的):

function writeText(script_file, location) {
    if (window.XMLHttpRequest)  {
        xmlhttp = new XMLHttpRequest();
    }   else    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        document.getElementById(location).innerHTML = xmlhttp.responseText;
    }
xmlhttp.open("GET",script_file,true);
xmlhttp.send();
}

Answer 1

您正在使用一个全局变量 xmlhttp，所以它在函数运行的第 2 次被破坏。请求本身是异步的，因此第二个调用在第一个调用仍在运行时运行。

要解决此问题，请在 xmlhttp 之前使用“var”关键字来代替使用局部变量(因此对函数的每次调用都有自己的 xmlhttp):

var xmlhttp;
if (window.XMLHttpRequest)  {
    xmlhttp = new XMLHttpRequest();
}   else    {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}