Javascript 一个页面中有两个xmlHttpRequests

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

我已经阅读并尝试使用这两篇文章中列出的修复方法，但在我的情况下，这两篇文章似乎都不起作用：

这是我的相关代码：

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");

---

抱歉，如果我在这里传递一些简单的东西，我就是无法让它工作。

您的

req

是一个全局变量，因为它没有

var

关键字定义，请记住这一点

我认为第二个调用会覆盖第一个调用。这是因为

XMLHTTPRequest

的（默认）异步性质。您的第一个函数调用将结束，但页面的获取仍在进行。然后，第二个函数调用覆盖上一个请求

但是，这并不能解释为什么

div

都会被第二次调用的结果填充。我得说我对这个问题有点迷茫。

这个问题

他回答了你的问题

在

request\u处理程序

函数中，您使用的是一个全局变量

req

，它在每次调用该函数时都会被覆盖

如果将其更改为“开始”：

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

你应该发现它是有效的。在这种情况下，

req

具有本地作用域，因此在您第二次调用

request\u handler

时不会被覆盖

---

我也可以建议，如果您打算编写Ajax脚本，您强烈考虑使用jQuery、原型或Dojo吗？编写跨浏览器工作的脚本很难，这些框架为您做了大量的工作。

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

jQuery有一个用于管理队列的插件，我相信大多数其他JavaScript框架（如Prototype和MooTools）也会这样做。如果您想继续使用原始JavaScript，我想看看以下网页：

---

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

changed\u div仍然是本地函数，那么为什么它会被覆盖呢？可能是因为ajax请求的同步特性和onreadystatechange稍后会被调用，或者类似的原因，仍然不知道……我不知道

onreadystatechange

处理程序如何连接到请求本身的细节，所以我无法告诉您。然而，我的回答的其余部分仍然正确，但我选择了Dancrumb的回答，因为它对代码和如何修复代码更为清晰。