单个页面中的两个 xmlHttpRequest答案

【问题标题】：Two xmlHttpRequests in a single page单个页面中的两个 xmlHttpRequest
【发布时间】：2011-01-20 16:58:19
【问题描述】：

我对 ajax 还很陌生，但我正在尝试实现两个简单的调用，以使用 javascript 动态更改页面上的两个单独的 div。我一次使用一个调用没有问题，但是当我使用两个时，似乎第二个 xmlhttprequest 接管了第一个并写入两个 div。

我已阅读并尝试使用这两个其他帖子中列出的修复程序，这两个帖子似乎都不适用于我的情况：

Sending two Ajax requests to two different PHP scripts from single javascript function

Using two xmlhttprequest calls on a page

这是我的相关代码：

function request_handler(url, params, changed_div) {
    if(window.XMLHttpRequest) {
            try {
                    req = new XMLHttpRequest();
            }catch(e) {
                    req = false;
            }
    }else if(window.ActiveXObject) {
            try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                    try {
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                            req = false;
                    }
            }
    }

    if(req) {
              req.onreadystatechange = function(){
                    if (req.readyState == 4 && req.status == 200){
                                    document.getElementById(changed_div).innerHTML = req.responseText);

                    }
            }

            req.open("POST", url, true);
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.send(params)
            return true;
    }

    return false;
}

下面是使用上述函数的每个请求的基本格式：

request_handler("sample.php", parameters , "sample_div");

抱歉，如果我在这里传递一些简单的东西，我似乎无法让它发挥作用。

【问题讨论】：

标签： javascript ajax xmlhttprequest

【解决方案1】：

这个问题

Using two xmlhttprequest calls on a page

会回答你的问题。

在您的 request_handler 函数中，您使用的是全局变量 req，每次调用该函数时都会被覆盖。

如果你把它改成启动：

function request_handler(url, params, changed_div) {
    var req;
    // Rest of your function
}

您应该会发现它有效。在这种情况下，req 具有本地范围，因此在您第二次调用 request_handler 时不会被覆盖。

如果您打算编写 Ajax 脚本，我是否也建议您强烈考虑使用 jQuery、Prototype 或 Dojo 之类的工具？编写跨浏览器工作的脚本很难做好，这些框架为您做了很多工作。

【讨论】：

changed_div 仍然是本地函数，那为什么会被覆盖？
可能是因为 ajax 请求的同步性质，并且 onreadystatechange 稍后会被调用，或者类似的东西，仍然不知道......
我不知道onreadystatechange 处理程序如何连接到请求本身的细节，所以我不能告诉你。但是，我的其余答案仍然成立

【解决方案2】：

您的req 是一个全局变量，因为它是在没有var 关键字的情况下定义的，请记住这一点。

我认为第二个调用会覆盖第一个调用。这是因为XMLHTTPRequest 的（默认）异步特性。您的第一个函数调用将结束，但页面的获取仍在进行。然后第二个函数调用会覆盖之前的请求。

但这并不能解释为什么div 都被第二次调用的结果填满了。我必须说我对那个有点迷茫。

【讨论】：

这仍然是正确的，但我选择了 Dancrumb 的响应，因为它对代码以及如何修复它更加清晰。

【解决方案3】：

这是一个非常常见的问题，尤其是如果您不想采取额外措施来阻止进一步的调用，直到第一个调用完成加载。这是一个更大的主题，我可以在一篇文章中介绍，但网络上有几个“Ajax 队列”示例，可以有效地管理接收到的请求的顺序。

jQuery 有一个用于管理队列的插件，我确信大多数其他 JavaScript 框架（例如 Prototype 和 MooTools）也会如此。如果你想坚持使用原始 JavaScript，我会看看这个网页：

http://www.cmarshall.net/MySoftware/ajax/index.html

他非常有效地实现了队列，并且有一个很好的使用示例。

【讨论】：