jQuery simultaneous and parallel ajax

by amindunited

HTML

<!-- 
JS LIBS
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>

JavaScript

/* Set up mockjax */
$.mockjax({
    url: '/movies',
    dataType: 'text/json',
    responseText: {movies: [{id:1},{id:2}]}
});
$.mockjax({
    url: '/tv',
    dataType: 'text/json',
    responseText: {
        tv: [{id:3},{id:4},{id:5}]
    }
})
$.mockjax({
    url: '/books',
    dataType: 'text/json',
    responseText: {
        books: [{id:6},{id:7},{id:8}]
    }
});

/* 
    Using jQuery 'promises' 
*/

$(function(){
    var store = {};
    
    $.getJSON('/movies', function(data){
        console.log("one");
        store = $.extend(store, data);
    })
    .then(function(){
        return $.getJSON('/tv', function(data){
            console.log("two");
            store = $.extend(store, data);
        })
    })
    .then(function(){
        return $.getJSON('/books', function(data){
            console.log("three");
            store = $.extend(store, data);
        })
    })
    .done(function(){ 
        console.log("Finally", store); 
    })
});

/* 
    Using $.when 
    
*/
$(function(){
    var store = {};
    $.when(
        $.getJSON('/movies', function(data){
            store = $.extend(store, data);
        }),
        
        $.getJSON('/tv', function(data){
            store = $.extend(store, data);
        }),
    
        $.getJSON('/books', function(data){
            store = $.extend(store, data);
        })
    
    ).done(function(data){
        console.log("store ", store);
    });

});