在一頁上的兩個Ajax調用只返回一個結果

我是新來的ajax，做了一些教程併成功地管理了幾個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的或類似的可以在這裏幫我，但因爲我是新來的吧，我想先寫我自己，只有在後一階段依靠快捷鍵）

感謝名單。

來源

2011-11-22 einav

這裏有一個小問題ajaxCaller（「places_proc.php」，params，myDiv）; 您需要在單引號中編寫myDiv，如第二行所示：ajaxCaller（「places_proc.php」，params，'myDiv'）; – wasimbhalli

感謝wasimbhalli，但myDiv是一個變量（我聲明它在ajaxCaller上方兩行），其中ctryDiv是一個常量，因此是單引號。 – einav

的ajaxCaller 的第二個實例..

只有在你的榜樣一切的單一情況下，有一個單一的全球myAjax您設置的第一個電話，然後立即更換在第二個電話。

可以通過聲明myAjax內ajaxFunction

function ajaxFunction() { 
    var myAjax; 
    ...

改變你的模式，然後在年底（return myAjax;）返回它，當它擁有新XMLHttpRequest

然後去這個參考工人職能中的新實例只是簡單的;

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

來源

2011-11-22 13:28:43

謝謝，Alex K.它做到了！ – einav

通過爲變量「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將保持第二次調用的值，使得第一次調用不會顯示任何內容。您需要同時分配這兩個變量（一個接一個完成），或者將它們分配給不同的變量名稱。

來源

2011-11-22 13:24:30 Boundless

謝謝，無邊。但是，我如何將它們分配給不同的變量？我是否需要爲每個ajax調用創建一個單獨的ajax函數？必須有一個更有效的方法來做到這一點。 – einav

@einav對不起，回覆遲了，但看起來你已經解決了。 – Boundless

在一頁上的兩個Ajax調用只返回一個結果

回答

相關問題