0
jQuery’s Ajax module was completely rewritten for the up and coming 1.5 release by Julian Aubourg. It added a new signature, new options, pluggable dataTypes, and a completely new architecture for what is returned by Ajax calls. The new signature for $.ajax is now:
$.ajax(url, options);
But it is completely backwards compatible, so no worries. I personally like the new signature as it aligns up nicer with $.get and $.post. I will come back to the other features such as new options, and custom dataTypes in the next post, for now were going to skip ahead to the new underlying architecture. Prior to this release ajax calls in jQuery simply returned and passed around the raw XHR object, it was not all that handy in my opinion. However, starting at 1.5 an augmented XHR object has replaced it. You may see it referred to as the jXHR object or a promise.
So what does the promise allow us to do? Well to sum it up, we can bind callbacks to an object whose current task will eventually complete.
var jxhr = $.ajax('/foo.php', {type:'get', dataType:'json'});
jxhr.success(function(response){
// do something with the resposne
});
jxhr.error(function(jxhr){
// do something with jxhr
});
console.log('whats up?');
Or you could accomplish something similar using the “then” binding which takes a done and fail callback.
$.getJSON('foo.php').then(function(response){
console.log(response);
}, function(jxhr){
console.log(jxhr);
});
console.log('whats up?');
Or you can even chain the bindings and/or conditionally add new bindings which is a huge advantage of nesting tons callbacks in previous versions.
var jxhr = $.ajax('foo.php', {
type: 'get',
dataType: 'json',
success: function (response) {
console.log('1');
jxhr.success(function(r){
console.log('4');
});
}
});
jxhr.success(function(response){
console.log('2');
});
jxhr.success(function(response){
console.log('3');
if (response[0] === 'one') {
jxhr.complete(function(response){
console.log('5');
});
}
});
console.log('whats up?');
So let’s say in the previous examples foo.php took 4 seconds to respond, it doesn’t matter, the ajax call will return a promise to us that will let us go ahead and bind a set of predefined events to it (success, done, complete, error and fail). It will later resolve based on what happened once the asynchronous task as completed and it will invoke the correct callbacks. As you can imagine there are a million ways to Sunday that you could formulate these calls. I personally like calling the success and error manually, at least in the case of Ajax. Check out https://github.com/jquery/jquery/blob/master/test/unit/Ajax.js for the various ways they are doing it. I would love to see what most people consider to be the “correct” way.
Another important thing to note is they have exposed the underlying deferred mechanics for your own use. So you can easily create promise like objects for your own asynchronous programming needs.
var def = new $.Deferred(), data = [1,2,3,4,5];
setTimeout(function(){
def.resolve(data);
}, 5000);
def.then(function(data){
console.log(data);
});
console.log('whats up?');
So just like our ajax calls, we can bind a set of predefined callbacks to run once an asynchronous task has resolved. So check out $.Deferred and see what kind of asynchronous magic you can do. The whole concept of deferred/promises can puzzle many developers, including me. So check out the links below for more information, they were quite helpful in writing this post and correct me if you notice some incorrect information in this post.
