Cara Menyusun Permintaan AJAX Secara Berulang

Menjujukan Permintaan AJAX

Dalam pelbagai senario, pembangun mungkin menghadapi keperluan untuk lelaran melalui koleksi, memulakan permintaan AJAX untuk setiap elemen. Objektifnya adalah untuk membenarkan setiap permintaan dilengkapkan sebelum meneruskan ke elemen seterusnya, mengelak daripada membebankan pelayan dengan permintaan serentak dan potensi isu. Selain itu, mengelak daripada penggunaan panggilan AJAX segerak memastikan penyemak imbas kekal responsif.

Corak Reka Bentuk untuk Mengulang Melalui Koleksi

Walaupun penyelesaian biasa melibatkan penciptaan konteks lelaran yang memajukan setiap panggilan balik yang berjaya, ramai yang mencari pendekatan yang lebih diperkemas. Berikut ialah beberapa corak reka bentuk yang berkesan:

jQuery 1.5

Versi jQuery 1.5 bagi penyelesaian menggunakan kaedah $.Deferred, $.queue(), dan $.ajax(). Ia juga menyediakan janji yang diselesaikan apabila permintaan selesai.

<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

Untuk versi terdahulu jQuery (1.4 khususnya), memanfaatkan baris gilir animasi pada objek kosong menyediakan cara untuk buat "baris gilir" tersuai untuk permintaan 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>

Contoh Penggunaan

Pertimbangkan struktur HTML berikut:

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

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

Menggunakan pemalam $.ajaxQueue() , anda boleh menyalin HTML item dalam #items ke #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 }));
    }
  });
});</code>

Pendekatan ini memastikan permintaan penyalinan dikendalikan secara berurutan, mengelakkan sebarang kemungkinan isu yang timbul daripada beban pelayan yang berlebihan.

Atas ialah kandungan terperinci Cara Menyusun Permintaan AJAX Secara Berulang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!