javascript - 没有 jQuery/JS 库的连续 Ajax 请求

Question

我有一个问题，主要是 IE。

我需要能够一个接一个地处理 n 个查询。但是如果我只是在 for 循环中调用下面的函数，IE 会做一些奇怪的事情(比如只加载这么多调用)。如果我使用警告框，它证明该函数获得了所有调用，而且令人惊讶的是它有效!

我的猜测是 IE 需要比其他浏览器更多的时间，而警告框正是这样做的。

这是我的代码:

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

此函数非常适合单个请求，但是当在循环中调用这么多次时，我该如何让它工作呢？

Answer 1

我认为这个问题可能与大多数网络浏览器实现的 2 个并发连接限制有关。

看起来您的网络服务响应延迟导致您的 AJAX 请求重叠，这反过来又超过了 2 个并发连接限制。

您可能需要查看有关此限制的这些文章:

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

HTTP 规范中也建议了此限制:section 8.14 last paragraph ，这可能是大多数浏览器强加它的主要原因。

要解决此问题，您可能需要考虑仅在上一个 AJAX 调用成功响应后才重新启动 AJAX 请求的选项。这将防止重叠发生。考虑以下示例:

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

此示例使用 ExtJS , 但您可以很容易地只使用 XMLHttpRequest。