Question

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

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

Answer 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等？编写跨浏览器的脚本很难做得很好，这些框架为你做了大量的工作。

Answer 2

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

我认为发生的是第二次调用会覆盖第一次调用。这是因为XMLHTTPRequest的（默认）异步性质。您的第一个函数调用将结束，但页面的获取仍在继续。然后第二个函数调用将覆盖先前的请求。

然而，这并不能解释为什么div都会填充第二次调用的结果。我必须说我在那个上有点迷失。

Answer 3

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

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

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

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

单个页面中有两个xmlHttpRequests

3 个答案: