Question

I have an issue, mainly with IE.

I need to be able to handle n queries one after another. But If I simply call my function below in a for loop IE does some strange things (like loading only so many of the calls).
If I use an alert box it proves that the function gets all of the calls, and surprisingly IT WORKS!

My guess is that IE needs more time than other browsers, and the alert box does just that.

Here is my code:

 var Ajax = function(all) {
  this.xhr = new XMLHTTPREQUEST(); // Function returns xhr object/ activeX
  this.uri = function(queries) { // Takes an object and formats query string
   var qs = "", i = 0, len = size(queries);
   for (value in queries) {
    qs += value + "=" + queries[value];
    if (++i <= len) { qs += "&"; }
   }
   return qs;
  };
  xhr.onreadystatechange = function() { // called when content is ready
   if (this.readyState === 4) {
    if (this.status === 200) {
     all.success(this.responseText, all.params);
    }
    this.abort();
   }
  };
  this.post = function() { // POST
   xhr.open("POST", all.where, true);
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xhr.send(uri(all.queries));
  };
  this.get = function() { // GET
   xhr.open("GET", all.where + "?" + uri(all.queries), true);
   xhr.send();
  };
  if (this instanceof Ajax) {
   return this.Ajax;
  } else {
   return new Ajax(all);
  }
 };

This function works perfectly for a single request, but how can I get it to work when called so many times within a loop?

Answer 1

I think the problem might be related to the 2 concurrent connections limit that most web browsers implement.

It looks like the latency of your web service to respond is making your AJAX requests overlap, which in turn is exceeding the 2 concurrent connections limit.

You may want to check out these articles regarding this limitation:

• The Dreaded 2 Connection Limit
• The Two HTTP Connection Limit Issue
• Circumventing browser connection limits for fun and profit

This limit is also suggested in the HTTP spec: section 8.14 last paragraph, which is probably the main reason why most browsers impose it.

To work around this problem, you may want to consider the option of relaunching your AJAX request ONLY after a successful response from the previous AJAX call. This will prevent the overlap from happening. Consider the following example:

function autoUpdate () {
    var ajaxConnection = new Ext.data.Connection();

    ajaxConnection.request({
        method:         'GET',
        url:            '/web-service/', 

        success: function (response) {
            // Add your logic here for a successful AJAX response.
            // ...
            // ...

            // Relaunch the autoUpdate() function in 100ms. (Could be less or more)
            setTimeout(autoUpdate, 100);
        }
    }
}

This example uses ExtJS, but you could very easily use just XMLHttpRequest.