解决一次要发出多个ajax请求
jquery ajax队列管理插件
不错的ajax的jquery队列管理器
;(function($) { function AjaxQueue(override) { this.override = !!override; }; AjaxQueue.prototype = { requests: new Array(), offer: function(options) { var _self = this; var xhrOptions = $.extend({}, options, { complete: function(jqXHR, textStatus) { if($.isArray(options.complete)) { var funcs = options.complete; for(var i = 0, len = funcs.length; i < len; i++) funcs[i].call(this, jqXHR, textStatus); } else { if(options.complete) options.complete.call(this, jqXHR, textStatus); } _self.poll(); }, beforeSend: function(jqXHR, settings) { if(options.beforeSend) var ret = options.beforeSend.call(this, jqXHR, settings); if(ret === false) { _self.poll(); return ret; } } }); if(this.override) { this.replace(xhrOptions); } else { this.requests.push(xhrOptions); if(this.requests.length == 1) { $.ajax(xhrOptions); } } }, replace: function(xhrOptions) { var prevRet = this.peek(); if(prevRet != null) { prevRet.abort(); } this.requests.shift(); this.requests.push($.ajax(xhrOptions)); }, poll: function() { if(this.isEmpty()) { return null; } var processedRequest = this.requests.shift(); var nextRequest = this.peek(); if(nextRequest != null) { $.ajax(nextRequest); } return processedRequest; }, peek: function() { if(this.isEmpty()) { return null; } var nextRequest = this.requests[0]; return nextRequest; }, isEmpty: function() { return this.requests.length == 0; } }; var queue = {}; var AjaxManager = { createQueue: function(name, override) { return queue[name] = new AjaxQueue(override); }, destroyQueue: function(name) { if(queue[name]) { queue[name] = null; delete queue[name]; } }, getQueue: function(name) { return ( queue[name] ? queue[name] : null); } }; $.AM = AjaxManager; })(jQuery); 使用示例: var newQueue = $.AM.createQueue(‘queue‘); $(function(){ newQueue.offer({url:‘?c=Message&m=write&a=10‘}); newQueue.offer({url:‘?c=Message&m=write&a=10‘}); newQueue.offer({url:‘?c=Message&m=write&a=1‘}); });
第二个插件
(function($) { var ajax = $.ajax, pendingRequests = {}, synced = [], syncedData = [], ajaxRunning = []; $.ajax = function(settings) { // create settings for compatibility with ajaxSetup settings = jQuery.extend(settings, jQuery.extend({}, jQuery.ajaxSettings, settings)); var port = settings.port; switch (settings.mode) { case "abort": if (pendingRequests[port]) { pendingRequests[port].abort(); } return pendingRequests[port] = ajax.apply(this, arguments); case "queue": var _old = settings.complete; settings.complete = function() { if (_old) { _old.apply(this, arguments); } if (jQuery([ajax]).queue("ajax" + port).length > 0) { jQuery([ajax]).dequeue("ajax" + port); } else { ajaxRunning[port] = false; } }; jQuery([ajax]).queue("ajax" + port, function() { ajax(settings); }); if (jQuery([ajax]).queue("ajax" + port).length == 1 && !ajaxRunning[port]) { ajaxRunning[port] = true; jQuery([ajax]).dequeue("ajax" + port); } return; case "sync": var pos = synced.length; synced[pos] = { error: settings.error, success: settings.success, complete: settings.complete, done: false }; syncedData[pos] = { error: [], success: [], complete: [] }; settings.error = function() { syncedData[pos].error = arguments; }; settings.success = function() { syncedData[pos].success = arguments; }; settings.complete = function() { syncedData[pos].complete = arguments; synced[pos].done = true; if (pos == 0 || !synced[pos - 1]) for (var i = pos; i < synced.length && synced[i].done; i++) { if (synced[i].error) synced[i].error.apply(jQuery, syncedData[i].error); if (synced[i].success) synced[i].success.apply(jQuery, syncedData[i].success); if (synced[i].complete) synced[i].complete.apply(jQuery, syncedData[i].complete); synced[i] = null; syncedData[i] = null; } }; } return ajax.apply(this, arguments); }; })(jQuery); (function(){ $("body").queue([]); $("#dtitle").click(function(){ $.ajax({ url: "test.php?t=" + new Date().getMilliseconds(), success: function(html){ jQuery("ul").append(html); }, //用abort而不用queue,是因为需求是需要最后一个ajax request,而之前的ajax request //其实并没有用,那何必要等它们执行完呢?中途就可以把它中止掉 mode: "abort" }); }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。