A Quick Guide to AJAX

This is a small reference for all the developers who are new to AJAX.

Full form of AJAX is Asynchronous JavaScript and XML. (XML is commonly used as the format for receiving server data, although any format, including plain text, can be used ). AJAX is no programming language but a mix of few concepts. It is a new technique for creating better, faster and more interactive web applications with the help of XML, HTML, CSS and JavaScript.

AJAX was coined in 2005 by Jesse James Garrett, that describes a “new” approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, and most importantly the XMLHttpRequest object. It is a client-side script that communicates to and from a sever without reloading or refreshing the webpage again and again. You just need to request data from server, when the server receives the data, it sends the data back to your webpage. The sending of the data basically works in the background which means that With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, update the current screen and the user would never know that anything was even transmitted to the server.

Definition : “The method of exchanging data with a server, and updating parts of a web page — without reloading the entire page.”

JavaScript includes features of sending asynchronous http request using XMLHttpRequest object. Ajax is about using this ability of JavaScript to send asynchronous http request and get the xml data as a response (also in other formats like JSON ) and update the part of a web page (using JavaScript) without reloading or refreshing entire web page.

Benefits of Ajax:

1. Callbacks:

Ajax is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. It only sends the data to the sever that is necessary, this way it minimizes the network utilization and the operations are performed faster. By using callbacks the server is not required to process all the data hence there is limited data processing on the server.

1. Asynchronous calls:

Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.

1. User-friendly:

Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.

1. Increased speed:

The most important usage of AJAX is to improve the speed, performance and usability of web application. For instance, if we look at the example of Netflix, the ratings and preference of movies are stored in your database and for the particular function, the complete webpage is not reloaded instead only that particular block of rating is refreshed. This save time and also improves the usability of the application.

AJAX cannot work independently. It is used in combination with other technologies to create webpages.

1. Javascript: JavaScript is a loosely typed scripting language. The JavaScript functions are called when an event occurs in a page.It works as a glue for the whole AJAX operation.

2. DOM: Dom represents the structure of XML and HTML documents. It uses API for accessing and manipulating structured documents.

3. CSS: CSS allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript

4. XMLHttpRequest: JavaScript object that performs asynchronous interaction with the

Steps of AJAX Operation

1. A client event occurs.
2. An XMLHttpRequest object is created.
3. The XMLHttpRequest object is configured.
4. The XMLHttpRequest object makes an asynchronous request to the Web-server.
5. The Web-server returns the result containing XML document.
6. The XMLHttpRequest object calls the callback() function and processes the result.
7. The HTML DOM is updated.

Advances made to AJAX
JavaScript is the client-side programming language and XML is a markup language to define data. The fetched data from the server is in XML, but now JSON ( Another markup language to define data) web services are replacing the XML Web services since JSON is much easier to read and use with JavaScript.

Another advance is the JavaScript Object Library called JQuery. JQuery is an free, opensource software. It is used to easily write client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual Studio and can be dragged and dropped onto web forms just like HTML and server controls. These controls are intended to be used for Ajax callbacks. However, they can also be used as normal client and or server controls. For example, Asp.Net does not come with the Tabs controls. However, the Ajax Control Toolkit does. The Tab control can postback to the server just like server controls.

Rich Internet Application Technology: AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting tremendous industry momentum and several tool kit and frameworks are emerging. But at the same time, AJAX has browser incompatibility and it is supported by JavaScript, which is hard to maintain and debug.

Browser Support
Not all browsers support AJAX. This means that the particular browser does not support the creation of JavaScript object — XMLHttpRequest object. Few browsers that support AJAX are:

1. Mozilla Firefox 1.0 and above.
2. Netscape version 7.1 and above.
3. Apple Safari 1.2 and above.
4. Microsoft Internet Explorer 5 and above.
5. Konqueror.
6. Opera 7.6 and above