Ajax - Working, Advantages, Disadvantages

Ajax : Asynchronous JavaScript and XML

I have already writen an introductory article on it. But in this post I will tell you about how is Ajax different from other web development techniques.

Note that I have used the word 'technique' and not technology. Ajax is not any specific technology, but its a specific implementation of exisiting technologies like Java Script and XML.

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This 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.

In a more simple language - Ajax can provide such dynamic web pages that can transfer the information from client to the server and vice versa without reloading the complete web page.

Ajax is used in Google applications where the information keeps on updating without the reload of full page. Ex: The Blog Bar, Custom Search Engines, Google search suggestions.

The following figure can explain the Ajax model...

The main technologies used to build a Application using Ajax are:

• XHTML and CSS for presentation
  
• the Document Object Model for dynamic display of and interaction with data
  
• XML and XSLT for the interchange, manipulation and display of data, respectively
  
• the XMLHttpRequest object for asynchronous communication
  
• JavaScript to bring these technologies together

The most important of these technologies is the XMLHttpRequest Object which is used to create an interactive web page using Ajax.

The XMLHttpRequest Object

This is the thing that makes Ajax different from others. This object allows to intract with the server in a dynamic way.

Its attributes can help you understand this better...

readyState the code successively changes value from
0 to 4 that means for "ready".

status 200 is OK

404 if the page is not found.

responseText holds loaded data as a string of characters.

responseXml holds an XML loaded file, DOM's method allows to extract data.

Methods of this object are:

open(mode, url, boolean) mode: type of request, GET or POST

url: the location of the file, with a path.

boolean: true (asynchronous) / false
(synchronous).

send("string") null for a GET command.

The above described object is used for creating scripts that can be used in dynamic web pages. You can get a lot of tutorials on creating such scripts on the internet.

Now, let us see some of the advantages and disadvantages of Ajax:

Advantages:

1. The interface is much more responsive, as explained before, because only a small part of the page is transferred at a time. The user has the feeling that changes are instantaneous.

2. Waiting time is reduced – when the visitor submits a form, they no longer have to wait for the entire page to be rebuilt and re-transmitted by the server. Instead, only the relevant content changes, and in non-critical cases, the visitor can still work while the data is being submitted.

3. If a page section encounters an error, other sections are not affected (if not logically linked) and the data already entered by the user is not lost. This way, the application fails graciously, without causing head-aches for the users.

4. Traffic to and from the server is reduced considerably – because you do not have to send the entire page content (CSS, images, static sections), the bandwidth usage is most likely to decrease.

5. Real-Time Form Data Validation: Form data such as user IDs, serial numbers, postal codes, or even special coupon codes that require server-side validation can be validated in a form before the user submits a form.

6. Auto completion: A specific portion of form data such as an email address, name, or city name may be auto completed as the user types.

Disadvantages:

1. Building an AJAX-powered application can increase development time and costs. It is usually considered more difficult than building a classic web application, because of the mixture of technologies and the special concern about everything going smoothly. However, because it is dealing with relatively known technologies, AJAX is not rocket science.

2. Although AJAX relies on existing and mature technologies like JavaScript, HTML and CSS, the available frameworks and components still need to completely mature. Tools like the Dojo toolkit or the Rico framework are just a milestone on this long road.

3. Using AJAX to asynchronously load bits of content into an existing page conflicts with the way we are used to navigate and create bookmarks in modern browsers. Because viewing some part of the page information no longer corresponds to a newly loaded page, the browser history and bookmarks will not be able to restore the exact page state. Also, clicking the Back button in a browser might not have any effect, since the URL was unchanged (even if parts of the page were changed). To overcome these problems you must implement a way to save the current page state so that it can be restored later on, when called from a bookmark or from the browser history.

4. AJAX is not meant to be used in every application. One of the main reasons for this stays in the fact that Google cannot index it. "Suppose you are building an e-commerce site. A complete AJAX application would be a mistake because search engines won't be able to index it. And without a search engine, a site won't be able to sell products." Keeping this in mind, a much better idea than creating complete AJAX applications would be to scatter AJAX features within the application.

5. The biggest concern with AJAX is accessibility. This is because not all browsers (especially older ones) have complete support for JavaScript or the XMLHttpRequest object. Some of the visitors do have browsers with the required features, but they choose or have to turn off JavaScript support. When you design the application you must make sure that a fail-safe solution exists for those users, so it can be accessed by anyone.

Furthermore, the way to access and use the XMLHttpRequest object in Internet Explorer and other browsers is different, which leads to a fork in the code and the need to treat each case separately.