Question

I have a table where each row has a button that triggers AJAX call. Calling the same function but different parameters. The result is displayed in the same row that the call was made from.

The call does svn up so it can take even a minute or so. I can observe that if I initiate new AJAX call before the previous one finishes I loose the result of the call.

Is there any way I can run multiple AJAX calls at the same time and get the results from the call and display them?

• using jQuery
• inside the same browser window
• calling php

HTML code that calls javascript

    <button type="button" onclick="update_revision(\'' . $directory  . '\',\''.$server_name.'\')" > update </button>

Javascript

   function update_revision(revision,server_name)
    {
      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)
          {
          document.getElementById("rev."+revision).value="updated to "+update_to;
          }
        }
      xmlhttp.open("GET","https://"+server_name+"/imacs/radek/svn_update.php?code_base="+revision+"&revision="+update_to+"&t=" + Math.random(),true);
      xmlhttp.send();
    }        

Answer 1

The problem is that you’re using a single global variable to store all your XMLHttpRequest instances. Whenever you create a new instance, and store its reference in the global variable, xmlhttp, the instance that was previously referenced there becomes un-referenced, and so it will be garbage collected as soon as the browser sees fit. Usually, this means it is garbage collected immediately; and in your case, it is being garbage collected even before the pending response is received.

One way to fix this problem, is to declare xmlhttp as a local var within your update_revision() function. Like this:

function update_revision(revision, server_name) {
    // declare xmlhttp locally
    var xmlhttp;  

    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 ) {
            if( xmlhttp.status == 200) {
                document.getElementById("rev." + revision).value = "updated to " + update_to;
            }

            // explicitly drop the reference when
            // we're done with it, so the browser will reclaim the object
            // (this is optional, but it's a good idea)
            xmlhttp = null;
        }
    }
    xmlhttp.open("GET", "https://" + server_name + "/imacs/radek/svn_update.php?code_base=" + revision + "&revision=" + update_to + "&t=" + Math.random(), true);
    xmlhttp.send();
}

NOTES:

1. xmlhttp is declared as a local var

2. xmlhttp is “nulled” when we don’t need it anymore (after readyState == 4). This will cause the browser to garbage collect the request instance, thus preventing resource leaking. This is a good practice (and so I’ve shown it in the example above), but technically, it’s optional.