Bagaimana untuk Menyusun Permintaan Ajax untuk Kawalan Optimum?

Menjujukan Permintaan Ajax

Apabila mengulangi koleksi dan membuat panggilan Ajax individu untuk setiap elemen, adalah penting untuk mengawal jujukan untuk mengelakkan lebihan pelayan dan pembekuan penyemak imbas. Walaupun iterator tersuai boleh digunakan, terdapat lebih banyak penyelesaian yang elegan tersedia.

jQuery 1.5

Dalam jQuery 1.5 dan ke atas, pemalam $.ajaxQueue() memanfaatkan $.Deferred, $.queue(), dan $.ajax() untuk mengurus penjujukan permintaan dan menyediakan janji yang diselesaikan apabila permintaan selesai.

Pelaksanaan:

(fungsi($) {

var ajaxQueue = $({});

$.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;

};

})(jQuery);

jQuery 1.4

Untuk jQuery 1.4, baris gilir animasi boleh digunakan untuk mencipta "baris gilir" tersuai. Anda juga boleh mencipta pemalam $.ajaxQueue() anda sendiri yang menggunakan baris gilir 'fx' jQuery untuk memulakan permintaan pertama secara automatik dalam baris gilir jika ia belum berjalan.

Pelaksanaan:

(fungsi($) {
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);

Contoh:

$("#item li").setiap(fungsi(idx) {
$.ajaxQueue({

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

});
});

Ini memastikan bahawa setiap permintaan Ajax dilaksanakan secara berurutan, membolehkan pengendalian beban pelayan yang anggun dan mengekalkan responsif penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Permintaan Ajax untuk Kawalan Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!