I have 2 sections in my webpage that require individual AJAX calls followed by the templating of data before injecting the content into the DOM. Right now I'm looking at the best way of doing this and I've been reading a lot of articles about jQuery Deferreds, so many to the point that I'm not entirely sure what the best way is. Below is the code that I think I would use but I would really appreciate some input. I'm also super hazy about caching if anyone would like to add some advice about that.

JS

function ajaxCall1() {
var dfd = $.Deferred();
return $.ajax({
type: 'POST',
dataType: 'json',
url: '/url1',
data: { },
success: function(data) {
// Run templating code
}
});
return dfd.promise();
}

function ajaxCall2() {
var dfd = $.Deferred();
return $.ajax({
type: 'POST',
dataType: 'json',
url: '/url2',
data: { },
success: function(response) {
// Run templating code
}
});
return dfd.promise();
}

$.when( ajaxCall1(), ajaxCall2() )
.then(function(){
// Display DOM elements
})
.fail(function(){
// Display error message
});