在单个页面中的两个xmlHttpRequests

我对ajax相当陌生，但我试图实现两个简单的调用来动态更改使用javascript的页面上的两个单独的div。我一次只使用一个调用没有问题，但是当我使用两个时，看起来第二个xmlhttprequest接管第一个，并写入到两个div中。在单个页面中的两个xmlHttpRequests

我已阅读并使用这两个其他职位既不列出的修复程序试图似乎在我的情况下工作：

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

道歉，如果我在这里传递简单的东西，我似乎无法让它工作。

来源

2011-01-20 sevad

这个问题

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时不会被覆盖。

可我也建议你认真考虑使用jQuery，原型或道场的喜欢，如果你打算编写Ajax脚本？编写跨浏览器的脚本很难做得很好，这些框架为你做了很多工作。

来源

2011-01-20 17:17:48 Dancrumb

changed_div仍然是局部的作用，那么为什么它覆盖掉了？ – Vishwanath 2011-01-20 17:20:40

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

我认为会发生的是第二个电话覆盖第一个电话。这是因为XMLHTTPRequest的（默认）异步性质。你的第一个函数调用将结束，但是页面的提取仍在进行中。第二个函数调用会覆盖先前的请求。

然而，这并不能解释为什么这两个div得到填充有第二调用的结果。我必须说我有点失落。

来源

2011-01-20 17:17:43

这仍然是正确的，但我选择Dancrumb的响应，因为它是一个更加清楚一点的代码，以及如何解决它。 – sevad 2011-01-20 19:56:11

这是一个非常普遍的问题，特别是如果你不希望采取更多措施，直到第一个已完成加载以阻止进一步的调用。它是一个更大的主题，我可以在后覆盖但也有一个“Ajax的队列”有效管理接收到的请求的顺序在网络上的几个例子。

jQuery的具有管理队列插件，我敢肯定，大多数其他的JavaScript框架如Prototype和MooTools的意志为好。如果你想坚持原始的JavaScript我想看看这个网页：

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

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

来源

2011-01-20 17:24:03

在单个页面中的两个xmlHttpRequests

回答

相关问题