Ajax (Asynchronous JavaScript and XML) is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object.

[REF : http://en.wikipedia.org/wiki/Ajax_(programming) ]

Lets assume you have a web page on your site that has lot of content(css,js,databse results) and you have a form that submits the data to the server. Before saving the data to the database you have to check a condition (Ex:whether email already exists in the database). Lets see how you can solve this problem with and without ajax.

Without Ajax

• You have to submit the form and load entire page content(css,js,databse results) again with the errors.
• Takes more time to load
• Since form fields are erased in submit you need to get the values of form fields and set it agin after refresh.
• You have to wait until the submit is completed before doing a another action (Clicking a link ,button ….)

•  

  Using Ajax

• Instead of loading the entire page again you can refresh the data on a specific section (form) of the page and display errors.
• Takes less time to load.
• Since form field data is not refrshed it will not be erased.
• You can do any other action until the ajax request is completed.

•  

  Now you can see the difference between the 2 methods. Ajax is more faster and effective when you need to do concurrunt activities.

Using normal javascript for ajax

Using jquery for ajax

You can see the difference between normal js ajax call and a jquery ajax call. All the xmlhttp object creation and status handling is done automatically inside the jquery framework. Using jquery produces less code and reusability. But in identifying the meaning of a asynchronous request normal javascript is better since you can see the full process with the status changes. In production jquery is better since it provides reusability.

• When you click on the validate button validate method will be called and value of the email will be assigned to a variable
• Then you need to create the XMLHttpRequest() object to make the ajax call.
• If condition checks the browser type.
• xmlhttp object should be created according to the browser type.
• Function inside the xmlhttp.onreadystatechange will be executed when the ajax request is success.
• readyState=4 and status=200 means request is successfully completed.
• xmlhttp.open will open the file to be executed on ajax request.

• You need to provide the method(GET or POST) and file to be executed with parameters.

• xmlhttp.send() will send the ajax request and onreadystatechange function will be called on successful completion.

Not synchronous.Concurrent requests can occur at different times allowing the client to continue during processing. In ajax you can send two requests one after another and execute concurrently . Since it cannot determine which request finishes first, ajax requests should not be dependent on each other.

You will be able to identify the meaning of Asynchronous and dependency using the following examples.

Using normal javascript for ajax

Using jquery for ajax

What is going to be displayed in the alert message when you execute validate method ?
Answer of most of the users will be response returned from server (xmlhttp.responseText). Unfortunately it is the wrong and common answer.

Whats the reason ?
When you call the function it will display nothing. Since the request to the server is Asynchronous displayMessage() will be called before the response from the server comes in. So it alerts the default value of message which is empty. In this scenario displayMessage() method is depending on the output from ajax call.

If you are making a ajax request other functions inside that should not depend on it. In this scenario ajax request and displayMessage() function will work as asynchronous requests and depends on each other. I hope you got the meaning of dependency and Asynchronous. Lets see how to implement this correctly.

Using normal javascript for ajax

Using jquery for ajax

Here the displayMessage() method will be called after the ajax request is successful . So it will alert the response from the server. In this scenario ajax request and displayMessage() function will work as synchronous requests by executing one after another.

Ajax is best suited when your pages has lot of dynamic sections. Ajax will allow each section to load independently. Hence the load time and efficiency will be increased.

Examples :

* Validate values of form fields before saving (Check email account exists before creating – Gmail)

* Dynamically load dropdown values from database

* Load table data and paginations (Extjs Grid)

* Live Search (Google Search)