Question

如何处理多个Ajax请求

我在一个 PHP页面中使用了多个 Like Button ，点击它时会调用相同的Ajax代码来更新相应的 Like to 与 text ..

不同

以下代码适用于所有Like按钮，当我点击其中任何一个等待直到ajax更新它... 但是当我同时点击超过1并等待更新时，在这种情况下只有最后点击的Like Text更改为不同..

请提供更好的解决方案或代码

感谢名单

页面：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

它验证了某些内容，如果已完成返回正常其他不正常

错误：（

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

Answer 1

只需为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();
}

Answer 2

我认为正在进行的是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";
    }
}

处理多个Ajax请求

2 个答案: