Monday, April 17, 2006

Ajax - The key to Rich Web Applications

Asynchronous JavaScript And XML is a web development technique for developing rich web applications. AJAX is aimed at increasing speed, interactivity and usability of web applications. More info from Wikipedia.

Typically (in most cases), getting a response from server involves refreshing/reloading the page you are viewing or going to a new page. With ajax, you can do it without refreshing. This is ajax in short :-) The natural question that should arise is 'HOW?'. Modern browsers come with support for an object called XMLHttpRequest. This object is used in ajax applications that require making an http request to the server and loading the response without refreshing the page.

While creation of an online account you have to provide a username. And if somebody has already taken it, you come to know about it only after submission of the form. This can now be avoided ! You can send an http request to the server with the username filled in by the new user as soon as the user leaves the text-field (onBlur event of javascript). The response can be shown next to the textfield so that user notices it immediately (as soon as it appears there).

So why should you use ajax ?

1. With ajax, you don't have to refresh your page for server responses.
2. You can get only the required server reponse and show in the desired place on your web-page. This reduces the byte-transfer considerably. There's no need to transfer all the html that show your headers, footers, images and navigation.

The methods and properties of this object are explained below.

var request = new XMLHttpRequest(); // creates an object of XMLHttpRequest

open() - new request to server.
send() - Sends a request to the server.
abort() - aborts current request
readyState - provides the current HTML ready state.
responseText - the text that the server sends back to respond to a request.

More information on the subject can be found on this link.

Some examples -
1. www.gmail.com - most of us know what it is :-)
2. http://gollum.easycp.de/en/ - a wikipedia browser
3. http://a-i-studio.com/cmd/ - a WebShell !

4 comments:

Anonymous said...

Hey AJAX is good no doubt..but you forgot to mention some problems in AJAX such as user can't use back button or he can't bookmark particular page.

Shrinivas

Ketan said...

Yes, you are right. But the advantages overweigh the limitations so much that I forgot mentioning about it. Moreover, applications like a telephone-directory search do not need a back-button at all nor does the search results page require book-marking. The main index page can be bookmarked, anyway. I'd think in a reverse way as far as some similar applications are concerned.

Why do you require a back-button if you do not leave the page !?

Anonymous said...

Actually I faced book mark problem while surfing esakal.com paper. Now I can't send interesting links to my friends. :-)

Shrinivas

Ketan said...

I see. Yes, in that case, AJAX can be a problem.

K