Handling Multiple Ajax Request

Question

How To Handle Multiple Ajax Request

i am using more than 1 Like Button in a single PHP Page , which when clicked calls same Ajax Code which update the corresponding Like to Unlike text..

the below code works fine for all Like Button when i click anyone of them n waits till ajax update it.. But when i click more than 1 at the same time and waits for updation, in such condition only the last clicked Like Text changes to Unlike..

please provide a better solution or code to do it

Thanx

---

Page : 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 />

---

Page : 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();
}

---

Page : verify.php

it verify something and if done returns ok else not ok

---

Error :(

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

Answer 1

Just set up an array for the AJAX handlers...

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

What I think is going on is xmlhttp is being used in a global context, which can be problematic. (See this question and answer for a more detailed reason. If it isn't already declared, declare it within the function.

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";
    }
}