AJAX

AJAX, which is short for Asynchronous JavaScript and XML, is a new approach to web applications. Though AJAX has been around for the last eight years, web developers didn't notice this technology until recently when Google used it for its Gmail, Google Maps etc. AJAX has emerged as a powerful platform for creating rich, web based applications that look and work like desktop applications even though they are browser based and use few resources.

The term AJAX was coined by Jesse James Garrett. This term was introduced to describe a set of technologies that allow browsers to provide users with a more natural browsing experience.

AJAX is not a technology but it is a methodology which you can use to build more dynamic and responsive web applications. According to Jesse James Garrett, AJAX combines several technologies, each thriving in its own right, and coming together in new and powerful ways.

Here are the technologies that AJAX combines to give customers its distinctively different, wonderful and magical results:

• HTML or XHTML as mark up language and CSS for creating style guide
• Document Object Model (DOM) with client side scripting language like JavaScript, to dynamically display and interact with the information presented
• XML and XSLT for data interchange and manipulation. XML is the commonly used format for transferring data back from the server
• XMLHttpRequest object to exchange data asynchronously with the web server
• JavaScript to bind everything together.
  

Why should I use AJAX?

AJAX is an outstanding approach, and it looks to only become more prevalent as time goes by. Let us go through the reasons behind the growing popularity of AJAX:

• AJAX is an open standards-based technology, which means that it supports most browsers and platforms. This means you will never have the uncertainty whether or not your application will run on your user's machine.
• AJAX-based applications are more usable and provide better user experience. Pages can request small bits of information from the server instead of requesting whole pages. This eliminates the problem of refreshing pages and slow response.
• AJAX benefits everyone, from the developers to the end-users.  With AJAX, your web applications can enjoy a number of benefits, such as lower cost of deployment, easier support, shorter development times and fewer installation hazards.
  
• AJAX is easy to learn and master, so there is no steep learning curve for development teams to shift from simple HTML and form-based applications to rich AJAX-based applications. It is very easy to upgrade the interface of existing application using AJAX; it doesn't require a wholesale upgrade and rewrite of present applications.
• AJAX is compatible with any standard web server and server-side language. You may take your pick from PHP, ASP, Perl, or ColdFusion and start building your web application.
• We all know that the Web 2.0 movement is in full swing; it is helping AJAX adoption for the time being. AJAX interfaces are key components for many Web 2.0 applications like Google maps or BackPack.
  

It should be noted, however, that there are some drawbacks to AJAX. For example, AJAX might easily break the expected behavior of browser's back button. Users might expect that clicking on back button will take them to the previous page, however it might not always happen for AJAX.

Since data used in AJAX application is JavaScript driven, search engine will not index any of the dynamically generated content. Therefore, AJAX websites are not SEO friendly.

How does AJAX work?

If you have used Gmail or Google maps, you must have noticed that you can check spelling of typed text or can scroll over the map respectively without submitting the page. AJAX is behind this behavior – it handles the requested operations in JavaScript and asynchronously invokes the server side operations that provide the desired results. Gone are the older approaches, which require reloading or refreshing of entire page with every request.  AJAX makes requests to the server without reloading the page. It provides the ability to communicate with the server asynchronously. So, no more waiting for the entire page to load since page information or user interface gets loaded/updated instantly. The interesting thing about this is - users don’t even realize that the page code is communicating with the server; they feel it like instant responding.

There is an AJAX engine that works as a mediator between the user and the server. Instead of loading a web page at the start of the session, the browser loads the AJAX engine (written in JavaScript). This engine renders the interface to the user and communicates with the server on behalf of the users. It is the engine that is responsible for asynchronous interaction between user and application, without letting the users know what communication is going with the server.

An AJAX script makes a request of a server by using the JavaScript XMLHTTPRequest object. This is typical JavaScript object, using which we may dynamically change the URL of the source without using a page refresh. This XMLHTTPRequest object retrieves information from the server in similar invisible way and it seems that page has been refreshed. However, any response to a user action that doesn’t require a response from server is managed by the engine. It can be simple data validation, editing data in memory or even some navigation.  

How is AJAX coded?

To code an AJAX application, firstly, you need to know how to create XMLHTTPRequest object. This is a JavaScript object and can be created like this:

The process differs based on the type of web browser you are using.

With Internet Explorer, the request looks like:

http = newActiveXObject(“Microsoft.XMLHTTP”);

This XMLHTTPRequest object handles all your server communication and it is the JavaScript technology that talks to the server through this object.

In normal application, if you fill up a form and click on Submit button, the entire form is sent to server, the server then works on processing a script. When the script is done, a completely new page is loaded. Of course during this time – when the server is processing the page and a new page is getting loaded – the user has to wait. They get a blank page and then a page that is redrawn from the server.

However, this work is done in a different way with AJAX, as it puts JavaScript technology and XMLHttpRequest object between the user’s web form and the server. When some data is given in the form and sent, it is sent to JavaScript code, not to server. This JavaScript code sends request to the server. When this thing happens, user’s screen doesn’t become blank. It doesn’t even get a flash or blink. So the user can continue entering data, scrolling around and using the application.   

Who is using AJAX?

If you have used any of these Google’s latest products – Gmail, Orkut, Google Groups, Google Suggest, Google Maps – you have already experienced AJAX based applications. However, there are many more websites that are not too far behind Google. Amazon’s A9.com search engine is applying AJAX and many of the features of Flickr depend on this technique.

The above examples make it clear that AJAX is not only technically sound, but also quite practical for developing real-world application. The AJAX applications can be of any size and type – from the very simple Google Suggest to much complex Google Maps – AJAX is fit to build any application.

AJAX is also used by some of the world’s popular applications such as:

• Ask.com search engine
• BaseCamp project management service
• Jacuba.com spell checker
• Meebo instant messenger
• MSN Virtual Earth
• Yahoo Instant search

AJAX is a simple technology and today most of the browsers support it. Here are some of them:

• Microsoft Internet Explorer 5.0 and above
• Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon, and Netscape 7.1 and above
• Opera browser version 8.0 and above
• Apple Safari version 1.2 and above

However, there are some browsers that do not support AJAX. They are: Opera 7 and below, Microsoft Internet Explorer 4.0 and below, Lynx and Links.