2

如何处理多个 Ajax 请求

我在单个PHP 页面中使用了 1 个以上的Like 按钮，单击该按钮时会调用相同的 Ajax 代码，从而将相应的Like更新为不同的文本。

下面的代码适用于所有 Like Button 当我点击其中任何一个时 n 等待 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
4

2 回答 2

3

只需为 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();
}
于 2013-04-25T12:48:47.097 回答
1

我认为正在发生的事情是xmlhttp在全球范围内使用，这可能是有问题的。（有关更详细的原因，请参阅此问题和答案。如果尚未声明，请在函数中声明它。

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";
    }
}
于 2013-04-25T12:48:45.557 回答