jQuery:多个AJAX/JSON请求相应单个回调

原文链接:jQuery: Multiple AJAX and JSON Requests, One Callback

原文日期: 2014年4月15日

翻译日期: 2014年4月22日

翻译人员: 铁锚



我在为  Mozilla Developer Network(Mozilla开发人员社区) 写代码时须要载入的一个普通的的脚本文件,以及一个JSON流。 由于我们使用jQuery,这意味着须要调用
jQuery.getScript 和 jQuery.getJSON 函数。 我知道这些函数都是异步运行(asyncronously)而且会延迟一段时间返回,所以我想知道是否有一种方式,使我能够使用单个回调,并行地载入它们,就像JS载入器
curljs 所做的那样。 非常幸运! 通过jQuery.when, 我能够并发地载入两个请求,仅仅运行一次回调!

jQuery 脚本

正如我提到的,以下是载入脚本和一个JSON资源的用例:

$.when(
	$.getScript('/media/js/wiki-min.js?

build=21eb633'),
	$.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/')
).then(function(a, b) {  // 或者也能够使用 ".done"
	// Yay, 载入完毕,此处我们能够运行一些依赖操作。。

。
});

当资源载入完毕, 指定的 done 或者
then 回调会触发,因此能够知道请求已经完毕。 每一个请求返回的回调參数对象类型不同,因此上述请求可能返回例如以下信息:

// 格式: [response, state, jqxhr], [response, state, jqxhr]
["(function(c){var e=c(".from-search-navigate");if(e…;if(j){g.apply(m,l)}}}})(window,document,jQuery);", "success", Object]
[Array[15], "success", Object]

假设还须要添加一个传统的AJAX XHR请求,比方说一个小部件模板,我们能够这样做:

$.when(
	$.getScript('/media/js/wiki-min.js?build=21eb633'),
	$.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/'),
	$.get('/')
).then(function(a, b, c) {
	console.log(a, b, c);
});

Dojo Toolkit非常早就有此类功能了,但jQuery也能够这么做我还是相当振奋的。 对于如今的开发,多个不同步且返回先后顺序也不确定的请求共享同一个回调是非常自然的需求,所以jQuery绝对是与时俱进的!