21-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

17.5.2　解决方案

本秘诀阐述两种不同的Ajax请求排队方法。第一种用请求填充队列，在前一个请求返回响应之后发送后续请求。第二种并行发送一组请求。但是，在所有响应返回之前不执行每个请求的回调函数。

<!DOCTYPE html>
<html><head>
　　 <title>jQuery Cookbook - 17.5 - Queuing Ajax Requests</title>
　　 <script type="text/javascript" src="../../jquery-1.3.2.min.js"></script>
　　 <script type="text/javascript" src="jquery-ajax-queue_1.0.js"></script>
</head>
<body>
　　 <h1>17.5 - Queuing Ajax Requests</h1>
　　 <input type="button" id="unqueued-requests" value="Unqueued requests"></input>
　　 <input type="button" id="queued-requests" value="Queued requests"></input>
　　 <input type="button" id="synced-requests" value="Synced requests"></input>
　　 <p id="response"></p>
</body></html>

Ajaxqueue jQuery插件（在 http://plugins.jquery.com/project/ajaxqueue/上可以下载）用于实现排队行为。三个按钮触发各组Ajax请求，在一个段落元素中显示响应日志：

(function($) {
　　 $('document').ready(function() {
　　　　　$('#unqueued-requests').click(function() {
　　　　　　　 $('#response').empty();
　　　　　　　 $.each([1,2,3,4,5,6,7,8,9,10], function() {
　　　　　　　　　　$.get('server.php',{ data: this }, function(data) {
　　　　　　　　　　　　 $('#response').append(data);
　　　　　　　　　　});
　　　　　　　 });
　　　　　　　 return false;
　　　　　});

第一个按钮触发常规的Ajax请求。发送10个请求，每个请求都包含表示顺序的数字。 server.php 脚本通过随机时间的休眠之后返回一个响应，模拟具有负载的一台服务器。当响应到达后，把它附加到 #response 段落的内容中：

$('#queued-requests').click(function() {
　　 $('#response').empty();
　　 $.each([1,2,3,4,5,6,7,8,9,10], function() {
　　　　　$.ajaxQueue({url: 'server.php',
　　　　　　　 data: { data: this },
　　　　　　　 success: function(data) { $('#response').append(data); }
　　　　　});
　　 });
　　 $.dequeue( $.ajaxQueue, "ajax" );
　　 return false;
});

“Queued requests”（排队的请求）按钮调用 ajaxQueue() 函数将每个请求加入队列。在内部，每当请求离开队列时用提供的选项调用 ajax() 函数。在每个请求添加到队列之后，以 ajaxQueue 函数作为第一个参数调用 dequeue() ，触发第一个请求。后续的各个请求将按照顺序发送：

　　　　　$('#synced-requests').click(function() {
　　　　　　　 $('#response').empty();
　　　　　　　 $.each([1,2,3,4,5,6,7,8,9,10], function() {
　　　　　　　　　　$.ajaxSync({url: 'server.php',
　　　　　　　　　　　　 data: { data: this },
　　　　　　　　　　　　 success: function(data) { $('#response').append(data); }
　　　　　　　　　　});
　　　　　　　 });
　　　　　　　 return false;
　　　　　});
　　 });
})(jQuery);

最后一组请求使用 ajaxSync() 函数并行发送请求，但在响应返回时同步执行提供的回调。

Previous 上一篇本节目录 Next 下一篇

21-解决方案

17.5.2 解决方案

17.5.2　解决方案