jQuery实现的ajax队列(queue)

----jquery load实现局部刷新----

<div id="area1">area1:xxx1</div>
<div id="area2">area2: xxx2</div>

<script language="javascript">
function loadArea2(){
$("#area2").load(location.href+' #area2',{'random':Math.random});
setTimeout("loadArea2()", 1000);
}
loadArea2();
</script>

 

 

-----queue队列实现----

自从jquery 1.3 以后，有个function能够很好的支持队列，那就是queue。

queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组)

要实现ajax队列，可以将ajax引入queue中。如下代码实现

// 第一个ajax请求 $(document).queue( "ajaxRequests" , function (){ //全局变量，储存第一个ajax请求数据 var a_data; $.ajax({ success: function (data){ a_data = data; $(document).dequeue( "myName" ); } }); }); // 第二个ajax请求 $(document).queue( "ajaxRequests" , function () { $.ajax({ success: function (data) { alert(a_data); $(document).dequeue( "myName" ); } }); }); // 触发queue往下执行 $(document).dequeue( "ajaxRequests" );

以上代码实现了ajax队列，2个ajax同步执行，其中dequeue用来结束当前ajax，并调用下一个ajax请求。

接下来，我们再来看看另一个ajax 队列的需求（需求二）：
在注册的时候验证邮箱、用户名等时候，单个客户端可以频繁发出无数的ajax请求出去，而我们的结果肯定是以最后一个ajax请求为准的。
首先模拟一个服务端页面：

<?PHP sleep(5); exit (time(). '' ); ?>

然后是前台页面，假设由一个元素触发：
html代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> < title >测试ajax队列</ title > </ head > < body > < div id = "dtitle" >点此触发</ div > </ body > < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ script > < script type = "text/javascript" src = "test.js" ></ script > </ html >

JS代码：

$( function (){ $( "body" ).queue([]); $( "#dtitle" ).click( function (){ $( "body" ).queue( function (){ $.get( "test.php?t=" + new Date().getMilliseconds(), function (){ //这一句让queue往下执行； $( "body" ).dequeue(); if ($( "body" ).queue().length == 0) alert( "done" ); }); }); }); });

下面是firebug下的执行结果，我连续对dtitle元素点击三次，如愿每5秒才发送一次请求。当然这只是演示的原理，既然发了三次请求，肯定要以最后一次为准，那么可以通过队列的length属性来轮循，一时length变为0了，就是全部请求结束了，你就可以执行你想要的逻辑了

好了，通过上面的代码，应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的，粗矿的代码，并不能提升代码水平。既然队列那么常用，那是否需要将这个功能封装？答案是肯定的。网上也有一些已经封装好了的插件。
那就重写$.ajax 这个方法吧。说干就干：

( 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);

以上代码加入了1个mode变量，有3个值”abort”(中止),”queue”(队列),”sync”同步。

对于需求二，我们用这个封装好的ajax改写并改进下,js代码部分如下：

$( 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" }); }); });

可以直接用封装好的那段js代码，直接用mode: “abort”
就可以了。