Question

我是ajax的新手，做过一些教程并成功管理了几个ajax调用。我现在正在尝试在一个页面上创建对ajax对象的多个调用，并且无法使其工作。

我的目标是只需点击一下用户就会触发两个ajax调用，每个调用都会返回一个不同div的响应。

我确实设法创建了两个这样的调用，Firebug告诉我他们都返回了所需的ResponseText，但只有第二个实际显示在页面上。

这是我的基本ajax功能：

function ajaxFunction()
{
try
    {// Opera 8.0+, Firefox, Safari
    myAjax = new XMLHttpRequest();
    }
catch (e)
    {// Internet Explorer Browsers
    try
        {
        myAjax = new ActiveXObject("Msxml2.XMLHTTP");
        }
    catch (e)
        {
        try
            {
            myAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
        catch (e)
            {// Something went wrong
            alert("browser too old");
            return false;
            }
        }
    }
}

这是激活ajax的函数：

function ajaxCaller(url, params, div)
{
    ajaxFunction();

    myAjax.open("POST",url,true);
    myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    myAjax.setRequestHeader("Content-length", params.length);
    myAjax.setRequestHeader("Connection", "close");


    myAjax.onreadystatechange=function()
      {
      if (myAjax.readyState==4 && myAjax.status==200)
        {
        document.getElementById(div).innerHTML=myAjax.responseText;
        }
      }

    myAjax.send(params);

}

这是JS代码应该一个接一个地触发两个调用：

var myDiv = "sons_of_" + type + id
var params = "id=" + id + "&type=" + type;
ajaxCaller ("places_proc.php",params,myDiv);

var params = "con=" + id;
ajaxCaller ("places_proc2.php",params,'ctryDiv');

正如我所说，唯一显示的响应是ajaxCaller的第二个实例（在两个调用之间切换顺序，切换显示的结果）。

我假设第二个调用的结果会覆盖第一个调用的结果，但作为新手，我不明白它发生的确切阶段。

我很欣赏任何关于我做错的指示。

（我知道JQuery或类似的东西可以帮助我，但是因为我是新手，我想先自己写一下，并且只在稍后阶段依赖快捷方式）

感谢名单。

Answer 1

ajaxCaller的第二个实例 ..

在您的示例中，只有单个实例，您在第一个调用中设置了一个全局myAjax，然后在第二个调用中立即替换。

您可以在myAjax

中声明ajaxFunction来更改模式

function ajaxFunction() {
  var myAjax;
  ...

然后在结束时（return myAjax;）返回它，当它包含 new XMLHttpRequest

然后简单地在worker函数中获得对这个新实例的引用;

function ajaxCaller(url, params, div)
{
  var myAjax = ajaxFunction();
  ...

Answer 2

您正在为变量“myAjax”中的第一个值分配第二个值。这就像做

这样的事情

var x=5;
x=7;
alert(x);

这里x将保持值7，因为这是分配给它的最后一个值。

此功能

myAjax.onreadystatechange=function()
      {
      if (myAjax.readyState==4 && myAjax.status==200)
        {
        document.getElementById(div).innerHTML=myAjax.responseText;
        }
      }

当您调用的服务器返回响应时，将调用

。当第一个调用返回时，myAjax将保持第二个调用的值，使第一个调用不显示任何内容。您需要同步分配这两个变量（一个接一个地完成），或者将它们分配给不同的变量名。

一个页面上的两个Ajax调用只返回一个结果

2 个答案: