2

複数の Ajax リクエストを処理する方法

私は単一のPHP ページで複数のLike ボタンを使用しています。これをクリックすると、対応するLikeを異なるテキストに更新する同じ Ajax コードが呼び出されます。

以下のコードは、それらのいずれかをクリックすると、すべての Like ボタンに対して正常に機能し、n は ajax によって更新されるまで待機します。ようではない..

それを行うためのより良い解決策またはコードを提供してください

ありがとう

ページ : 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を返し、そうでない場合はOKを返します

エラー ：（

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 に答える