The History
In the earlier days, the web used a traditional or classic approach to display information where, for every event, e.g a button click, the whole page used to get refreshed. And people often had to witness a blank white screen till the page was redrawn. If not, then they still had to wait till the page was refreshed and in a ready state again. The whole experience was very frustrating…. every time….!!
Enter Ajax
There were various attempts made to tackle this frustration. One Samaritan, by the name of Jesse James Garrett, started publishing articles about what he called “Advanced Web Techniques.” But yet people were somehow not convinced and ready to use this technic.
Fortuously, in one of his speaking sessions, Garrett revealed that Google used the very same technic. Invoking that single name, Google, was enough to change peoples’ point of view.
AJAX came to life and widespread adoption.
What is Ajax?
Ajax is one of the hottest web technologies of the current age.
Ajax consists of HTML, JavaScript™, DHTML, CSS, and DOM, and is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications.
However, Ajax is far more than just a fad; it’s a powerful approach to building Web sites and it’s not nearly as hard to learn as an entire new language.
Oh.. and btw, if you were wondering what the full form is, that’s…
Asynchronous JavaScript and XML
And trust me, this is only useful in interviews 
The asynchronous part comes from the fact that when a change has to be made to the current page (the user clicks on a link, or submits some information), only the part to change is transferred from the server, and not the entire page.
Now for the name…
With apologies to the people who make the cleanser and the detergent, legend has it that the original Ajax was the second most powerful of the Greek warriors at Troy. Even though he had some issues, his strength and skill in battle were second only to Achilles. In naming the technology Ajax, Jesse James Garrett gave the technology both Ajax’s strengths and issues… thus the name “AJAX”
Here are some reasons why AJAX is disruptive in the way people use the Web.
Why Ajax rocks
AJAX has two huge benefits:
- Speed and invisibility makes for a very slick user experience.
- The smaller server resources footprint helps server scalability.
I’ll explain these. If you post using AJAX, only the data (or parameters) that the server function requires is posted. In a login scenario, only the username and password strings (100 bytes maybe) are sent to the server and only a boolean value (1 byte) is returned. This means that only 101 bytes (excluding network handshaking traffic) is sent & received. If we were to create the same functionality using ASP.NET, all the state data is pushed to a server and the whole page is returned. Should the page use 20Kb of traffic, AJAX will save nearly 99.5% of this.
Further more, when using AJAX your web server and or db server (or whatever your config is) does not have to do any processing other than running the called function and returning the return value. No page load events, no xsl transform etc. This can have a huge impact in an enterprise environment.
When should I use it?
- On-the-Fly Form Data Validation
- Auto completion
- Master Details Operations
- Sophisticated UI Controls (widgets)
- Quick data store updates
- Real-time information feeds
When I shouldn’t
Simple forms.
Even though forms are the single biggest beneficiary of “Ajaxification,” a simple comment form, or submit order form, or other one-off rarely used form does not benefit from Ajax driven submission. Generally, if a form is not used much, or it’s critical to work properly, Ajax is not that helpful.
Search.
LiveSearch on blogs is more annoying than useful. There’s a reason that Google Suggest is staying in beta and not going on the front page of Google. Searching on Start.com or Live.com doesn’t allow use of the back button to see a previous search, or previous pages.
Basic navigation.
In general, driving basic site/application navigation using Ajax is an awful idea. Why would anyone want to spend time writing code to emulate the browser behavior when they could spend time making their application better? For basic navigating between documents, Javascript doesn’t help.
Replacing a large amount of text.
Ajax saves a complete refresh of the page, so small pieces of the page can be more dynamically updated. But if nearly everything on a page is changing, why not just request a new page from the server?
Display manipulation.
Even though it seems that Ajax is purely a UI technology, it’s not. It’s actually a data synchronization, manipulation and transfer technology. For maintainable and clean web applications, it’s a good idea not to have Ajax/Javascript manipulate the interface directly at all. Javascript can stay separate and simply manipulate the XHTML/HTML DOM, with CSS rules dictating how the UI displays that data. See this post for a simple example of using CSS instead of Javascript to control display.
Useless widgets.
Sliders, drag and drops, bouncies, mouse gestures, whatever. Mostly these widgets can be replaced with more intuitive controls, or eliminated altogether in favor of simplicity. In picking colors, maybe a slider widget is useful to pick the exact shade. But in picking a price point in a store, a slider to pick the price to the cent is just overkill.
Why Ajax sucks
Bookmarks
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.
History
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 programatically so that it can be restored later on, when called from a bookmark or from the browser history.
Accessibility
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. Further more, 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.
How it works…
Following are the essentials for working with AJAX:
HTML, CSS, XML, any server-side technology and JavaScript
Ajax Frameworks
- Pure JavaScript libraries – provide core remote scripting.
- Server-based AJAX libraries – generate the AJAX code from your server application.
Following are some of the most popular AJAX libraries:
- AjaxPro
- ASP.NET AJAX Extensions
- Direct Web Remoting (DWR)
- Google Web Toolkit (GWT)
- Dojo
- Prototype
- xAJAX
Who’s using Ajax
Rightly said, images speak louder than words…
Getting started…
Here are some handy references to get started…. NOW :
So start rockin…!!!And stay tuned for my next blog on the how to implement Ajax in the real world…
–Gautam
