如何迭代地对 AJAX 请求进行排序

对 AJAX 请求进行排序

在各种场景中，开发人员可能会遇到需要迭代集合、为每个元素发起 AJAX 请求的情况。目标是允许每个请求在继续下一个元素之前完成，避免并发请求和潜在问题压垮服务器。此外，避免使用同步 AJAX 调用可确保浏览器保持响应能力。

迭代集合的设计模式

虽然常见的解决方案涉及创建一个在每次成功回调时前进的迭代器上下文，许多人寻求更精简的方法。以下是一些有效的设计模式：

jQuery 1.5

解决方案的 jQuery 1.5 版本使用 $.Deferred、$.queue() 和 $.ajax() 方法。它还提供了一个在请求完成时解析的承诺。

<code class="javascript">$.ajaxQueue = function(ajaxOpts) {
  var jqXHR, dfd = $.Deferred(), promise = dfd.promise();

  ajaxQueue.queue(doRequest);

  promise.abort = function(statusText) {
    if (jqXHR) {
      return jqXHR.abort(statusText);
    }
    var queue = ajaxQueue.queue(), index = $.inArray(doRequest, queue);
    if (index > -1) {
      queue.splice(index, 1);
    }
    dfd.rejectWith(ajaxOpts.context || ajaxOpts,
      [promise, statusText, ""]);
    return promise;
  };

  function doRequest(next) {
    jqXHR = $.ajax(ajaxOpts)
      .done(dfd.resolve)
      .fail(dfd.reject)
      .then(next, next);
  }

  return promise;
};</code>

jQuery 1.4

对于早期版本的 jQuery（特别是 1.4），利用空对象上的动画队列提供了一种方法为 AJAX 请求创建自定义“队列”。

<code class="javascript">(function($) {
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {
      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);
        next();
      };

      $.ajax(ajaxOpts);
    });
  };
})(jQuery);</code>

用法示例

考虑以下 HTML 结构：

<code class="html"><ul id="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="output"></ul></code>

使用 $.ajaxQueue() 插件，您可以将 #items 中的项目的 HTML 复制到 #output：

<code class="javascript">$("#items li").each(function(idx) {
  $.ajaxQueue({
    url: '/echo/html/',
    data: {html : "["+idx+"] "+$(this).html()},
    type: 'POST',
    success: function(data) {
      $("#output").append($("<li>", { html: data }));
    }
  });
});</li></code>

此方法可确保按顺序处理复制请求，防止服务器负载过大而产生任何潜在问题。

以上是如何迭代地对 AJAX 请求进行排序的详细内容。更多信息请关注PHP中文网其他相关文章！