Article on AJAX

Introduction to AJAX

AJAX (Asynchronous Java-script Ans XML) is a widely accepted technology for web based applications. If you have many forms in your web page and you want user to send data to server — once they have filled out one of the forms, They normally have to submit the form and then wait as the entire page is refreshed including all other forms. Similarly, if you want to refresh a portion of your web page, you have no choice but to reload the whole page.

This is inefficient, time-consuming, and particularly frustrating if there’s only a small amount of data needs to be sent back and forth. In this Article, you’ll be introduced to AJAX, a technology that allows you to send these requests through small !JavaScript calls, and a !JavaScript then refreshes only an area of a page rather than whole page.

AJAX is not only about refreshing an area of web page, But it is also about user experience. It offers almost same user experience, in web applications, as desktop based applications offer.

Looking at the history of AJAX, The term AJAX was first coined by Jesse James Garrett in a blog entry on February 18, 2005. Microsoft is the first to introduce a way of making calls to server using JavaScript in IE 5.5. Microsoft's Exchange 2000's web based Outlook is the first well known application to use AJAX. But strength of technology was overlooked that time. Extensive use of AJAX by Google in GMail, Orkut and GoogleMap brought AJAX into attention. It then became so famous that all others also started using AJAX into their web applications. Read A brief history of AJAX for further information.

Working of AJAX

Ajax is not a technology, but it is a combinations of technology working together. Those technologies include,

HTML and CSS for presenting.
JavaScript to make a call to server, Getting a response and modifying HTML DOM.
The XMLHttpRequest class to send or receive data back and forth to server.

Traditional web application model works like this: Most user actions in the web page trigger an HTTP request back to the server. The server does some processing — and then returns an HTML page to the client. This approach seems nice, but it does not give a great user experience. While the server is doing its thing, Why should user be waiting?

AJAX eliminates the start-stop-start-stop nature of interaction of web application. It introduces one layer between client and server called AJAX engine which makes calls to server asynchronous.

Comparison between classic web application approach and Ajax web application approach:



Image taken from blog post of Jesse James Garrett

AJAX engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So that user does not have to wait for the response of one action and can keep working on page continuously.

Difference between Synchronous and Asynchronous approach:


Image taken from blog post of Jesse James Garrett

pros and cons of AJAX

Pros of using AJAX

• User Experience
• Bandwidth usage
• Separation of data, format, style and function

Cons of using AJAX

• Browser support
• Browser integration
• Back button problem
• Bookmark problem
• Search engine optimization
• JavaScript reliability

I have taken this from wikipedia. I will be writing on these pros and cons in detail with examples. For further information on pros and cons of AJAX read Why use AJAX

What is AJAX framework?

AJAX framework hides, the complexity involved with AJAX from programmers and makes their life easy. Any AJAX framework consists of two parts. One is client side part which involves sending request to server, getting the response, and processing response. And the other is server side part which involves processing the requests, searching for the data, and sending response back to client.

Different AJAX frameworks and comparison between them

There are many AJAX frameworks available. This gives you good overall comparison between those available frameworks.

Other References

1. Mastering AJAX
2. Seven Things to know for AJAX
3. AJAX tutorial
4. AJAX based TWiki
5. Learn step by step AJAX

This is it for AJAX as of now. Be tuned to get more on AJAX. Feel free to write your views and feedback. Let me know if i can even help you solve any problems in AJAX.

Signing Off
Kiran Thakkar