Asynchronous requests in jQuery

As per my last post (What is Ajax ?), we have seen that the base of each asynchronous request is XmlHttpRequest object.

Now, Let’s look at the equivalent jQuery code for make synchronous and asynchronous requests.

jQuery offers an .ajax() method and various shorthands for accomplishing common tasks using AJAX.
Here’s the jQuery code:


$.ajax("") // issue a 'GET' request to fetch's home page
 .done(function(data) { // success handler (status code 200)
 .fail(function(xhr) { // error handler (status code not 200)
 console.log("Error occurred: ", xhr.statusText);

The first line specifies the URL from which you want to request data. The code then specifies the callback
functions for the success and error conditions (jQuery takes care of checking for readyState and the status code).
Here we have not specify the type of request (GET) or whether it is asynchronous or not.
This is because jQuery uses GET by default and $.ajax() is asynchronous by default.
We can override these parameters (and more) to fine-tune your request:


	url: "",
	async: true, // false makes it synchronous
	type: "GET", // 'GET' or 'POST' ('GET' is the default)
	done: function(data) { // success handler (status code 200)
	fail: function(xhr) { // error handler (status code not 200)
		console.log("Error occurred: ", xhr.statusText);

For more info please visit:-

Note:- .done() and .fail() were introduced in jQuery 1.8. If you’re using an older version of jQuery, use .success() and .error(), respectively.


Programming is easy…

What is Ajax ?

AJAX stands for Asynchronous JavaScript and XML.

AJAX  is a technique that enables a page to request or submit data without doing a refresh or postback.

Using asynchronous requests to access data behind the scenes greatly enhances the user experience because the user does not have to wait for the full page to load.  And since the full page doesn’t have to reload, the amount of data requested from the server can be significantly smaller, which results in even faster response times.

The heart of AJAX is the XmlHttpRequest object, which was originally developed by Microsoft for use in Outlook Web Access with Exchange Server 2000. It was soon adopted by industry heavyweights such as Mozilla, Google, and Apple and is now a W3C standard (

An  AJAX request with XmlHttpRequest looks like this:-

 //Instantiate XmlHttpRequest object
 var xhrObject = new XMLHttpRequest();  //Line 1

 // open a new 'GET' request to fetch's home page"GET", "", false); //Line 2

 //send the request with no content (null)
 xhrObject.send(null);  //Line 3

 if (xhrObject.status === 200) { //Line 4
 // The 200 HTTP Status Code indicates a successful request will output reponse text to
 //browser's console (Firefox, Chrome, IE 8+)
 else {
     //something bad happened, log the error
     console.log("Error occurred: ", xhrObject.statusText);

This example creates a synchronous request (the third parameter in, which means that the browser will
pause the script execution until the response comes back. You typically want to avoid these kinds of synchronous
AJAX requests at all costs because the web page will be unresponsive until the response comes back, resulting in
a very poor user experience.

But It’s quite easy to switch from a synchronous request to an asynchronous request : by simply set the third parameter in to true. 

Now, because of the asynchronous nature, the browser will not stop; it will execute the next line Line -4 (the xhrObject.status check) immediately. This will most likely fail because the request may not have completed executing.  To handle this situation, you need to specify a callback—a function that gets called as soon as the request is processed and a response is received.

Let’s look at the modified code now:

// Instantiate XmlHttpRequest object
var xhrObject = new XMLHttpRequest();

// open a new asynchronous 'GET' request to fetch's home page"GET", "", true);

// attach a callback to be called as soon as the request is processed
xhrObject.onreadystatechange = function (evt) {

// as the request goes through different stages of processing, the readyState value will change  this function will be called every          //time it changes,  so readyState === 4 checks if the processing is completed

   if (xhrObject.readyState === 4) {
     if (xhrObject.status === 200) {
     else {
         console.log("Error occurred: ", xhrObject.statusText);

// send the request with no content (null)

This code is almost identical to the synchronous version, except that it has a callback function that gets
executed whenever the server sends back any information.

Note-You must attach any callbacks before issuing xhrObject.send(), or they will not be called.

Programming is easy….