处理多个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(); 
}