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絕對是與時俱進的!