how to check if all ajax objects are finished in a page?

[reubin haz]

I want to do something after knowing all ajax objects are finished in a page. But it seems it's not easy to tell this. I tried this code:

  
var AJA = {
container : [],
cancel : function (ajaxObj) {
if (ajaxObj && ajaxObj.readyState != 4 && ajaxObj.readyState != 0) {
      ajaxObj.onreadystatechange = function () {};
      ajaxObj.abort();
      ajaxObj = null;
    }
}, 
  add : function (ajaxObj) {
  this.container.push(ajaxObj);
  },
  isCompleted : function() {
  if (this.container.length < 1) {
  return true;
  }
      for (var item in this.container) {
      var ajaxObj = this.container[item];
      if (ajaxObj && ajaxObj.readyState != 4 && ajaxObj.readyState != 0) {
      return false;
      }
      }
  return true;
  }
};
 
  

But isCompleted() is consistly returning false, which means not finished yet.

Can someone find problem in the code or give me a solution to tell if all ajax objects are finished in a page?

[Anirvan Majumdar]

Your code is surely elegant and I can't really find any specific reason why it shouldn't work. For starters, you might want to alert the readyState's of every ajaxObj you retrieve from the container[]. That should give a good indication as to where the problem may lie. Also, you might want to verify if you're calling the isCompleted() method from the correct place. Maybe at the time this method is invoked, some or the other AJAX call is yet to complete its run.

Lastly, in your cancel() method, do you really need to override the onreadystatechange attribute of the ajaxReqObj and invoke abort(), since you're only setting it to null at the end?

[reubin haz]

Thanks for the reply. I just did a debug. I found the for loop is cause of the problem. Using for(var item in this.transports) makes item having an extra element 'include' (I dont't know why), which makes it return false. If I just use for(var i=0; i<this.transports.length; i++), the function works finally.

I use setInterval() to consistly call isComplete(), then the page can eventually know if all ajax object have finished it. But this leads me another doubt: what if some ajax object has waited too long and no server response, how do I write code to handle this ajax call timeout situation?

[reubin haz]

Lastly, in your cancel() method, do you really need to override the onreadystatechange attribute of the ajaxReqObj and invoke abort(), since you're only setting it to null at the end?

I intend to cancel and stop any ajax calls when calling cancel(). I thought doing those can gracefully release the resource. Do you mean setting ajax object to null is enough to cover other 2 steps?

[Anirvan Majumdar]

One way that I can think of is that instead of storing the simple ajaxObj, you can create an ajaxReq object which will look something like this:

var ajaxReq = {
                 reqObj : [the request obj],
                 initTime : [the time stamp when the call is made]
};

Thereof, whenever you're looping through the container[], you can retrieve every ajaxReq object and verify whether the (currTime - ajaxReq.initTime) hasn't exceeded some pre-defined timeout value.

[reubin haz]

Thanks Anirvan. I try that out.