Ajax queue requests.

[sayedsohail]

The solution to this problem would be to use an array and push each request in it. Then use a timer to frequently look at this array, shift one request of the bottom and execute it. Repeat until the array is empty...

 

 

At last i am close to somewhere and would like to share with viewers, but can someone help to improve this function a bit as it needs some tweekening.

 

 

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); 

 

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

}