為jQuery.Ajax加上Queue

  • 47921
  • 0
  • Web
  • 2010-11-26

Ajax在我的濫用下,曾經一個網頁同時送出50個左右的Request,使得網頁不穩定,人多同時瀏覽,還照成站台產生災難性失敗,不過這些Request還是要送,因為是不同系統透過Web Service取值(客戶不要快取),那怎麼辦呢??後來想到Queue的概念,google搜jqueue 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使其強制順序執行。
不過可能有缺點就是了。