處理多個Ajax請求

Question

如何處理多個Ajax請求

我在一個單一的PHP頁，這時候點擊呼叫同阿賈克斯守則，更新相應的喜歡使用超過1 Like按鈕到不像文本..

當我點擊他們ň等待的人，直到AJAX更新它.. 但是當我點擊更多下面的代碼工作正常，所有的Like按鈕比1在同一時間和等待更新用，在這樣的條件只有最後單擊如文本修改與..

請提供一個更好的解決方案或代碼做

感謝名單

---

頁：Like.php

<span id="like1" onclick="ajaxFun(1)">Like</span><br /> 
<span id="like2" onclick="ajaxFun(2)">Like</span><br /> 
<span id="like3" onclick="ajaxFun(3)">Like</span><br /> 
<span id="like4" onclick="ajaxFun(4)">Like</span><br /> 
<span id="like5" onclick="ajaxFun(5)">Like</span><br /> 
.... 
<span id="like10" onclick="ajaxFun(10)">Like</span><br /> 

---

頁：ajaxx.js

function ajaxFun(id) { 
    document.getElementById("like"+id).innerHTML="wait !!!"; 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { 
     // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      var getData=xmlhttp.responseText; 
      if(getData=="ok") { 
       document.getElementById("like"+id).innerHTML="Unlike"; 
      } 
      else { 
        document.getElementById("like"+id).innerHTML="Like"; 
      } 
     } 
    } 
    xmlhttp.open("GET","verify.php?id="+id,true); 
    xmlhttp.send(); 
} 

---

頁：verify.php

它驗證的東西，如果做返回OK其他不正常

---

錯誤:(

Like 
Like 
Like 
wait !!! 
wait !!! 
wait !!! 
wait !!! 
wait !!! 
wait !!! 
Unlike 

Answer 1

是被在全球範圍內使用我的想法是怎麼回事xmlhttp，這可能是有問題的。 （見this question and answer進行更詳細的原因。如果沒有聲明，該函數內聲明它。

function ajaxFun(id) 
{ 
    document.getElementById("like" + id).innerHTML = "wait !!!"; 
    var xmlhttp = null; /* NEW LINE */ 
    if (window.XMLHttpRequest) 
    { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else 
    { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (xmlhttp !== null) 
    { 
     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4) 
      { 
       if (xmlhttp.status == 200) 
       { 
        var getData = xmlhttp.responseText; 
        if (getData == "ok") 
        { 
         document.getElementById("like" + id).innerHTML = "Unlike"; 
        } 
        else 
        { 
         document.getElementById("like" + id).innerHTML = "Like"; 
        } 
       } 
      } 
     } 
     xmlhttp.open("GET", "verify.php?id=" + id, true); 
     xmlhttp.send(); 
    } 
    else 
    { 
     document.getElementById("like" + id).innerHTML = "Could not get XMLHttpRequest"; 
    } 
} 

Answer 2

剛剛成立的AJAX處理數組...

var arrAjaxHandlers = []; 
function ajaxFun(id) { 
document.getElementById("like"+id).innerHTML="wait !!!"; 
if (arrAjaxHandlers[ "like"+id ] == null) 
{ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     arrAjaxHandlers[ "like"+id ]=new XMLHttpRequest(); 
    } 
    else { 
     // code for IE6, IE5 
     arrAjaxHandlers[ "like"+id ]=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 
arrAjaxHandlers[ "like"+id ].onreadystatechange=function() { 
    if (arrAjaxHandlers[ "like"+id ].readyState==4 && arrAjaxHandlers[ "like"+id ].status==200) { 
     var getData=arrAjaxHandlers[ "like"+id ].responseText; 
     if(getData=="ok") { 
      document.getElementById("like"+id).innerHTML="Unlike"; 
     } 
     else { 
       document.getElementById("like"+id).innerHTML="Like"; 
     } 
    } 
} 
arrAjaxHandlers[ "like"+id ].open("GET","verify.php?id="+id,true); 
arrAjaxHandlers[ "like"+id ].send(); 
}