為jQuery.Ajax加上Queue

Ajax在我的濫用下，曾經一個網頁同時送出50個左右的Request，使得網頁不穩定，人多同時瀏覽，還照成站台產生災難性失敗，不過這些Request還是要送，因為是不同系統透過Web Service取值(客戶不要快取)，那怎麼辦呢??後來想到Queue的概念，google搜jqueue ajax queue還滿多資料的，以下是我的過滤的結果，供各位參考。

1.AJAXQ

http://plugins.jquery.com/project/ajaxq

$.ajaxq ("testqueue", {
    url: "test_1.html",
    cache: false,
    success: function(html)
    {
        $("#results").append(html);
    }
});

個人評語

加一個q與一個參數，與原使用方式改變較少，還不錯。

2.AjaxQueue

http://plugins.jquery.com/project/ajaxqueue

這套件有二個Method

//呼叫不會馬上執行，要一個Request結束，才會執行下一個Request
jQuery.ajaxQueue({
        url: "test.php",
        success: function(html){ jQuery("ul").append(html); }
    });

//試過不會自動執行，必需要手動執行dequeue不知是不是Bug，還是jquery 1.2是會自動執行queue?
jQuery.dequeue( jQuery.ajaxQueue, "ajax" );
 


//呼叫馬上執行，但會將所有事件綁架，等所有Request結束，才會執行所有事件(這不是Queue喔)
jQuery.ajaxSync({
    url: "test.php",
    success: function(html){ jQuery("ul").append("<b>"+html+"</b>"); }
});

 

個人評語

一次只能一個種Queue，沒辦法並行，還要手動執行不喜歡。

 

3.AJAX Queue/Cache/Abort/Block Manager

http://plugins.jquery.com/project/AjaxManager

//需要先建立AjaxManager(直接呼叫$.manageAjax.Add也會自動建立)
var ajaxManager = $.manageAjax.create('cacheQueue', {
    queue: true, 
    cacheResponse: true
});


ajaxManager.add({
  success: function(html) {
      $('ul').append('<li>'+html+'</li>');
  },
  url: 'test.html'
});



//另一種使用方式
$.manageAjax.add('clearQueue', {
  success: function(html) {
      $('ul').append('<li>'+html+'</li>');
  },
  url: 'test.html'
});

個人評語

用起來很麻煩，不喜歡

 

最後因為有些現有專案，我不想改太多的Code，只想改一點點，所以我對jQuery下手。

//將jQuery.ajax包裝成自己重新寫過的
jQuery.originAjax = jQuery.ajax;
jQuery.ajax = function (option) {
    //因為是非同步的，我用二個Queue，一個記錄執行，一個記錄完成。
    var oldComplete = option.complete;
    option.complete = function () {
        if (oldComplete) oldComplete.apply(this, arguments);
        jQuery.dequeue(jQuery.ajax, "ajaxDown");
    };

    jQuery([jQuery.ajax]).queue("ajax", function () {
        jQuery.originAjax(option);
    });

    jQuery([jQuery.ajax]).queue("ajaxDown", function () {
        jQuery.dequeue(jQuery.ajax, "ajax");
    });    

    var q = jQuery([jQuery.ajax]).queue("ajaxDown");
    if (q.length == 1) {
        jQuery.dequeue(jQuery.ajax, "ajax");
    } 
};

因為$.post,$.get最後都是呼叫$.ajax所以我綁架$.ajax使其強制順序執行。

不過可能有缺點就是了。