Building a Javascript HTTP Request Queue

Anyone working with AJAX knows the headache of dealing with HTTP Requests. They can only be done one at a time, and any one called while waiting on another leaves that request blowing in the wind. The only way to successfully handle request that can be fired off at any time, is to use a queuing system to manage the calls. I’m sure there are other recommendations out there, but I always enjoy the challenge of creating my own solutions.

Before I get into the code of my AJAX Request Queue, I want to show you the debug window. I set this up as a div with a few form fields that I can pop open at any time to show me what’s going on in the queue.

	Form Field “queueMsg” – A general message about the state of the queued requests.
	Form Field “queueInCall” – The value of the inCall variable… where or not the HTTP Request line is busy.
	Form Field “queueReadyState” – The value of the readystate variable of the current HTTP Request, if in a call.
	Form Field “queueTest” – The list of calls waiting to be executed. This example shows that there are 2 pending calls, one to get some slides and another to get comments for a particular slide.

The following is the Javascript code for the queue, all contained in a .JS file called createRequestObject, which is linked on pages that need to make HTTP Requests. I’m not going to go into too much detail about the code, just the overall idea.

Setting up initial variables:

// TURN ON DEBUG WINDOW FEEDBACK // I WILL WANT TO DISABLE THIS IN THE LIVE VERSION… var httpTesting = true; // SET MY REQUEST OBJECT var http = createRequestObject(); // VARIABLE TO TRACK IF WE ARE CURRENTLY IN A CALL var inCall = false; // QUEUE FOR CALLS var callToArray = new Array(); // QUEUE FOR FUNCTION TO EXECUTE WHEN CALL COMPLETE var returnToArray = new Array();

Create our Request Object:

function createRequestObject() { var reqObj; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ reqObj = new ActiveXObject("Microsoft.XMLHTTP"); isIE = true; }else{ reqObj = new XMLHttpRequest(); } return reqObj; }

Insert calls to the Queue:

function sendCall(whereTo, returnTo){ // GET THE NEXT ARRAY ITEM AND REMOVE FROM THE ARRAY callToArray.push(whereTo); returnToArray.push(returnTo); }

Watcher function that is called on intervals to set out queued calls based on inCall variable:

function callQueue(){ // IF WE HAVE A WAY OF MONITORING THE QUEUE, UPDATE IT if(httpTesting){ calls = ""; for(i=0;i<callToArray.length;i++){ calls += callToArray[i] + "n"; } document.getElementsByName("queueTest")[0].value = calls; document.getElementsByName("queueInCall")[0].value = inCall; document.getElementsByName("queueReadyState")[0].value = http.readyState; } // CHECK THE QUEUE AND SEND THE NEXT CALL IN LINE if(!inCall && callToArray.length > 0){ // DO WE HAVE ANYTHING IN THE QUEUE? if(callToArray.length > 0){ // WE DO, SO GET THE FIRST ITEM IN THE CALL ARRAY AND REMOVE IT whereTo = callToArray.shift(); returnTo = returnToArray.shift(); // SEND THAT CALL doCall(whereTo, returnTo); }else{ // UPDATE DEBUG QUEUE if(httpTesting){ document.getElementsByName("queueMsg")[0].value = "no items in queue."; } } }else{ // UPDATE DEBUG QUEUE if(httpTesting){ if(inCall){ document.getElementsByName("queueMsg")[0].value = "currently in a call."; }else{ document.getElementsByName("queueMsg")[0].value = "no items in queue."; } } } }

If we are not currently in a call and have a pending request, the call URL is sent here:

function doCall(whereTo, returnTo){ inCall = true; http.open('get', whereTo); // DO WE HAVE A FUNCTION TO CALL ONCE CALL IS COMPLETED? if(returnTo.length > 0){ eval("http.onreadystatechange = "+returnTo); } // SEND CALL http.send(null); }

This is a generic return function intended to just clear the inCall variable when we have a call type that we don’t need/expect a response from:

function hr_inCall(){ if(http.readyState == 4){ inCall = false; } }

And finally, to start the Queue engine, we have:

var queueWatcher = setInterval(callQueue, 100);

All that together successfully runs my Request Queue and gives me the ability to monitor it. A pause button would be a nice addition, but I haven’t had time to implement it. However, it would simply need to clear the queueWatcher interval on pause and restart it on play.

Finally, for any page that needs to make a call, for example, a log in, I would just have the submit button call a function that gathers the data and sends it to the queue, as such:

function checkLogin(){ username = document.getElementsByName("loginEmail")[0].value; password = document.getElementsByName("loginPassword")[0].value; document.getElementById("loginSubmit").innerHTML = "Checking Login..."; sendCall("req/getLogin.php?username=" + username + "&password=" + password, "hr_checkLogin"); }

You will notice when I sendCall, I have “hr_checkLogin” as the second parameter, which, once the call is complete, will call:

function hr_checkLogin(){ if(http.readyState == 4){ inCall = false; response = http.responseText if(response != "0"){ document.getElementById("loginArea").innerHTML = "Login successful. Welcome back. <A href='projects.php'>Projects</a>"; }else{ document.getElementById("loginSubmit").innerHTML = "<font color='red'>Login Failed</font>"; } } }

The important thing is to always set inCall to false once your call is complete, or the next request will never be processed.

Like I said, there may be better solutions out there, but I’m a big fan of building my own, which always helps me to become a better programmer.

Any thoughts?