两个同时的ajax调用 - 一个没有运行或两个回调返回相同的responseText

时间:2014-11-30 22:56:53

标签: javascript ajax httprequest simultaneous

好的我想首先说我已经检查了我在这里找到的其他帖子我遇到了同样的问题,但没有一个解决了我的问题,两个是一个简单的错误,另一个是与PHP会话锁定有关,我没有使用会话。

基本上我正在向两个不同的页面运行两个Ajax请求,并在主页面(调用请求)加载后以不同的方式使用单独的数据。

为了简化问题,我在这里设置了这个网站(本来会使用jsFiddle,但是HttpRequests会很有趣): The calling page | One of the pages being called | The second page being called

上面链接的页面的来源是我在我的示例中使用的所有代码,仅此而已。第二个ajax调用可以通过在网址上附加“#off”来关闭第一个链接。

我在自己的私有Wamp测试服务器中看到的问题是,Ajax请求的两个回调都在运行,但传递给函数的数据与它不应该的相同。第一个和第二个回调函数都从第二个调用接收responseText。但是,在此Web服务器上只运行第二个回调,除非第二个ajaxCall关闭(#off),否则第一个回调不会运行。我的私人服务器和在线服务器之间必定存在一些差异,但我无法重新创建它。但是,仍然存在一个问题,我猜测一个解决方案将是两者的解决方案。

谁能告诉我为什么会这样?我误解了HttpRequests是如何工作的吗?或者我的代码中只有一些漏洞?

<小时/> 修改:

以下是代码:

<html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" >



function ajaxCall(dest, callBack, data, method, async, returnXML) {
        method = typeof method !== 'undefined' ? method : "POST";
        async = typeof async !== 'undefined' ? async : true;
        returnXML = typeof returnXML !== 'undefined' ? returnXML : false;   

        var ajax;
        if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
      }
      else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
             returnXML ? callBack(xmlhttp.responseXML) : callBack(xmlhttp.responseText);
        }
      }
      xmlhttp.open(method , dest, async);
      if(method == "POST")
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      data === null ? xmlhttp.send() : xmlhttp.send(data);
}



$(document).ready(function() {


ajaxCall("player.htm", function(html) {
            $("#player").html("Player:<br>" + html);    
        }, null);

if(location.hash != "#off") {
ajaxCall("home.htm", function(html) {
            $("#home").html("Home:<br>" + html);    
        }, null);
}


});


</script>



<style type="text/css">

#wrapper {
 width: 215px;

}
#wrapper:after {
 content: "";
 display:none;
 clear: both;
}
#player, #home {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin-right: 5px;
}
#player {float: left;}
#home {float:right;}


</style>



<div id="wrapper">
    <div id="player"></div>
    <div id="home"></div>
</div>
</html> 

Home.htm:

I am the text from home.htm

Player.htm:

I am the text from player.htm

<小时/> 有几点需要注意:

  1. 这个例子是原始应用程序的一个极其简化的版本(由此产生的问题是相同的,所以我没有意识到显示原始示例,因为它是很多代码。这就是说,在实际中应用程序中的一个页面被显示,并且反过来,发出AJAX请求,因此在另一个回调内运行其中一个请求实际上不是一个解决方案,它似乎是一个侧面步骤的问题,因为函数'ajaxCall'肯定不应该混淆两个请求对象。

  2. 我没有收录原始资料来源,因为我不想更长时间地发布已经很长的帖子,但是这些链接都可以使用。

  3. 对于很长的帖子感到抱歉,但我不得不详细解释我的问题,过去几天我一直绞尽脑汁。

  4. 您可能需要右键点击&gt;在将#off添加到网址后重新加载页面以查看更改。

1 个答案:

答案 0 :(得分:2)

您的xmlhttp变量为implicitly global。使用var statement即可。或者您可能只是将标识符与声明但未使用的var ajax

混淆