Javascript异步调用相互踩踏答案

【问题标题】：Javascript asynchronous calls stepping on one anotherJavascript异步调用相互踩踏
【发布时间】：2010-02-21 03:35:11
【问题描述】：

我正在使用 AHAH（如此处 http://microformats.org/wiki/rest/ahah 所述）进行两次调用以在页面上填充 HTML。调用是在文档准备好之后发生的，并且一个接一个地被触发。结果，每次，第一次调用都会被最后一次调用响应覆盖。所以我将在页面上有两个相同的 HTML 块，而不是两个唯一的代码。有时第一次调用甚至没有评估它的回调，因此仍然是空的。

有什么想法吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

如果您使用的是该页面上的确切代码，那就不足为奇了，因为该示例使用单个全局变量来存储正在生成的 XMLHttpRequest。所以它不可能同时处理一个以上的请求：第二次调用该函数会用一个新的覆盖req，导致ahahDone读取的req是错误的请求。

如果您想允许这样做，您必须将req 设为局部变量（通过在function ahah() 中声明它为var），并将其与target 一起传递给ahahDone() 函数。或者直接内联：

function Element_loadHTML(element, url) {
    var req= null;
    if (window.XMLHttpRequest) {
        req= new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            req= new ActiveXObject('MSXML2.XMLHttpRequest');
        } catch() {}
    }
    if (!req) {
        element.innerHTML= 'Browser does not support XMLHttpRequest';
        return;
    }
    element.innerHTML= 'Loading...';

    req.onreadystatechange= function() {
        if (req.readyState===4)
            element.innerHTML= req.status===200? req.responseText : 'Error '+req.status;
    };
    req.open('GET', url);
    req.send(null);
} 

Element_loadHTML(document.getElementById('appdata'), 'appdata.part.html');
Element_loadHTML(document.getElementById('foo'), 'bar.part.html');

浏览器嗅探并尝试执行脚本标签的东西是绝望和破碎的；不要使用它。将<script> 元素内容加载到页面中并不是一个好习惯。

【讨论】：

PREFECT，我不知道为什么我以前没有看到。谢谢！另外，我没有使用脚本标签执行部分。这确实是个坏主意。