1

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(); } 
2
  • 1
    Just stop using globals. You overwrite xmlhttp so every time the state of any of your XHR objects changes, the onreadystatechange checks the condition of the last one you created. Commented Oct 12, 2011 at 22:20
  • @Quentin: could you elaborate more? I don't understand ... Commented Oct 12, 2011 at 22:29

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Great explanation. Noooow I understood. What if I use jQuery instead of pure javascript?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.