使用jQuery的并行异步Ajax请求
使用jQuery的并行异步Ajax请求
提问于 2009-06-29 21:03:05
我想根据多个ajax/json请求的结果更新一个页面。使用jQuery，我可以“链接”回调，就像这个非常简单的简化示例：
$.getJSON("/values/1", function(data) {
// data = {value: 1}
var value_1 = data.value;
$.getJSON("/values/2", function(data) {
// data = {value: 42}
var value_2 = data.value;
var sum = value_1 + value_2;
$('#mynode').html(sum);
});
});但是，这会导致请求是串行发出的。我更喜欢一种并行发出请求，并在所有请求完成后执行页面更新的方法。有没有办法做到这一点？
回答 10
Stack Overflow用户
回答已采纳
发布于 2009-06-29 21:10:54
尝试这个解决方案，它可以支持任何特定数量的并行查询：
var done = 4; // number of total requests
var sum = 0;
/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
var number = this;
$.getJSON("/values/" + number, function(data) {
sum += data.value;
done -= 1;
if(done == 0) $("#mynode").html(sum);
});
});Stack Overflow用户
发布于 2012-05-09 00:36:00
Stack Overflow用户
发布于 2009-06-29 21:58:41
以下是我直接回答您的问题的尝试
基本上，您只需构建并执行AJAX调用堆栈，然后在所有事件完成时调用所提供的函数-所提供的参数是来自所有所提供的ajax请求的结果的数组。
显然，这是早期的代码-您可以在灵活性方面对此进行更详细的说明。
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var ParallelAjaxExecuter = function( onComplete )
{
this.requests = [];
this.results = [];
this.onComplete = onComplete;
}
ParallelAjaxExecuter.prototype.addRequest = function( method, url, data, format )
{
this.requests.push( {
"method" : method
, "url" : url
, "data" : data
, "format" : format
, "completed" : false
} )
}
ParallelAjaxExecuter.prototype.dispatchAll = function()
{
var self = this;
$.each( self.requests, function( i, request )
{
request.method( request.url, request.data, function( r )
{
return function( data )
{
console.log
r.completed = true;
self.results.push( data );
self.checkAndComplete();
}
}( request ) )
} )
}
ParallelAjaxExecuter.prototype.allRequestsCompleted = function()
{
var i = 0;
while ( request = this.requests[i++] )
{
if ( request.completed === false )
{
return false;
}
}
return true;
},
ParallelAjaxExecuter.prototype.checkAndComplete = function()
{
if ( this.allRequestsCompleted() )
{
this.onComplete( this.results );
}
}
var pe = new ParallelAjaxExecuter( function( results )
{
alert( eval( results.join( '+' ) ) );
} );
pe.addRequest( $.get, 'test.php', {n:1}, 'text' );
pe.addRequest( $.get, 'test.php', {n:2}, 'text' );
pe.addRequest( $.get, 'test.php', {n:3}, 'text' );
pe.addRequest( $.get, 'test.php', {n:4}, 'text' );
pe.dispatchAll();
</script>这是test.php
<?php
echo pow( $_GET['n'], 2 );
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1060539
复制相关文章
相似问题