A close look at jqXHR object of jQuery

jQuery 1.5 brings few new concepts to the world of web development. The most talked about among them is the new jqXHR implementation with Deferred Objects. The jqXHR (jQuery XMLHttpRequest) replaces the browser native XMLHttpRequest object. Thus jqXHR is a superset of the browser native XMLHttpRequest object, which wraps the browser native object into a standard interface. In addition to providing support for standard XHR methods and properties, the jqXHR also contains methods to override Mime type. jqXHR also provides standard callback methods .error(), .success(), and .complete() methods. When an $.ajax() request terminates, these methods call a function which is present in these methods as a function argument. This allows developers to define multiple callbacks on a single request, and even to assign callbacks after the request may have completed.

Deferred Object and Promise Interface

Defferred Object, as defined on jQuery API site, is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. Among the other methods of the Deferred object, the most useful is the deferred.promise(). This allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the deferred methods needed to attach additional handlers or determine the state, but not ones that change the state. The jqXHR objects returned by $.ajax() implement the Promise interface. The object has all the properties, methods, and behavior of a Promise.

jqXHR Backward Compatibility with XMLHttpRequest

For backward compatibility with XMLHttpRequest, a jqXHR object will expose the following properties and methods:

readyState, status, statusText, responseXML and/or responseText  (with xml and/or text response, respectively), getAllResponseHeaders(), getResponseHeader(), abort() and setRequestHeader().

Since success, error, complete and statusCode cover all the requirements, jqXHR doesn’t provide any support for onreadystatechange.

Example of deferred object with promise

function newajaxrequest() {

var deferred = $.Deferred();

var promise = deferred.promise();

var jqxhr = $.ajax({

// ...

});

jqxhr.success(function(data, status, xhr) {

if (!data || !data.success) {

deferred.reject(jqxhr, 'error');

} else {

deferred.resolve(data, status, xhr);

}

});

jqxhr.error(function(jqXHR, status, error) {

deferred.reject(jqXHR, status, error);

});

return promise;

}

Using the above ajax request with promise:

var request = newajaxrequest();

request.done(successCallback);

request.fail(errorCallback);

or, in single line as

newajaxrequest().then(successCallback, errorCallback);

To implement standard ajax interface like

var request = newajaxrequest();

request.success(successCallback);

request.error(errorCallback);

one has to add

request.success = promise.done;

request.error = promise.fail;

Please try and experiment with the new objects and help me understand it better.

2 Responses to “A close look at jqXHR object of jQuery”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>