Tuesday, May 15, 2007

AJAX: The veins of Web 2.0

In Homer's Iliad "Ajax the great" is a legendary Greek warrior that the Trojans feared. AJAX is therefore a fitting name for a technology that could prove as unstoppable in conquering the web as Ajax was in fighting the Trojans.

Perhaps it is still too early to give Ajax more prominence than DHTML and Java, that have been around for much longer. But AJAX is a development platform that is already gaining traction on some of the most popular sites on the web.

Web 2.0 and AJAX are partners. Web 2.0 is about making the web more intelligent and interactive, building communities and encouraging collaboration. It doesn't prescribe how this vision is to be achieved, nor is it a development suite. It's simply a vision that speaks of a new way of thinking about the web.

AJAX is a collection of development tools that work together to make an individual web page more intelligent and interactive. In some sense AJAX fulfils the Web 2.0 culture of moving away from static web pages with fixed content towards a more dynamic and interactive experience. It doesn't quite fulfil every single Web 2.0 dream, but that may even be the reason why AJAX has become so popular so rapidly – it's a real technology with achievable implementation rather than an abstract description of a utopian vision.

The principle of making web pages more dynamic and interactive is not a new one. So what's so great about AJAX?

The early web was basically a collection of online documents that were interconnected through hypertext links. The vision was quite revolutionary at the time, because it connected chunks of isolated information with its interlinked content based around a common standard – HTML – and this increased the informational value of the entire network.

Even now, as in the early days of the web, web pages are often created offline and simply uploaded to the web server. Changes to the page requires manual editing offline and for the new version to be uploaded and copied over the old one. This was fine for posting an essay online, but it lacks interactivity and is also cumbersome to manage. The web had far greater potential in terms of information and content delivery than merely displaying static pages.

Technology evolved through the last decade and a half, to include more dynamism and interactivity on web pages using JavaScript, ActiveX, and XML, and more intelligent back-ends, such as SQL databases, CGI and ASP. This lead to the other kind of ASPs (Application Service Providers) such as Hotmail or Yahoo Notepad, as well as other interactive features like online forums and web-based chat.

HTML was never developed with real-time interactivity in mind, but it was still the foundation of the Internet and it became a major drawback. Any change to a web page – such as entering and saving information in a form or viewing the next image in a slideshow – typically required the web server to compose a new page in HTML and download that to the client.

In the late 1990s DHTML was touted as the first real answer to the demand for interactive pages. The beauty of it was that it made possible, for example, the client to display a new image on a web page without having to contact the server and request a whole new page. With DHTML however, web pages only appeared to be dynamic. All the content related to a page would be pre-loaded, and the page couldn't get additional information from the server without needing to refresh. Interactive web pages required information to be sent from the server to the client without needing to refresh the page.

The difference between AJAX and DHTML is subtle, but the implications are profound. AJAX uses many of the same tricks as DHTML, such as JavaScript and CSS, but the key difference is that AJAX can communicate with the server, and request new information, without needing to reload the page.

This seemingly trivial feature makes all the difference. No longer is a page limited by the information that can be loaded into the background. Instead it can have the full wealth of the information on the server at its fingertips, and yet present a solid and consistent front end to the user.

Without AJAX, pages like Google Earth would need to refresh each time you panned or zoomed. You can interact with the map using the intuitive tools you'd expect, such as dragging it around or zooming in and out. And all this takes place without the page needing to reload. An example of a site that does not use this technology is the Cricinfo.com – 'Live scorecard' feature which has to reload web pages constantly as new information is added.

AJAX uses a range of tools to bring web pages to life. At the core is XHTML (Extensible HTML), which is a fusion of XML and HTML and is ratified by the World Wide Web Consortium or W3C, who are the overseers of HTML and other web standards. XHTML brings the power of XML to web pages, with its ability to manage information and interact with servers in ways that HTML can't. XHTML works along with CSS to actually render the page.

The next piece of the puzzle is DOM (Document Object Model), which is a way of managing and manipulating the information in an HTML or XHTML document.

The final, and critical component, is XMLHttpRequest, which is a clumsy name for a very neat piece of technology. XMLHttpRequest is an API that works with a range of scripting languages, which in the case of AJAX is usually JavaScript. XMLHttpRequest can communicate directly with the server and request and manipulate data, and then pass that through to the page being viewed via JavaScript.

Another way to visualise AJAX in action is to picture the AJAX engine sitting in between the web and the page you're viewing. Instead of your page requesting information from the server directly, and constantly reloading, the AJAX engine does all the talking, and leaves your web page alone, with AJAX only updating the elements on the page that it needs to.

It's not that AJAX will completely transform the web, but it will further the evolution of the web from being a series of interlinked documents to being an information-based application platform. Online email, calendars, maps, stock market graphs, world clocks and image viewers are just some of the rudimentary applications of AJAX that are around today, with more sweeping implementations on the horizon.

AJAX doesn't do everything, nor does it purport to, but it has become a cornerstone of Web 2.0 technology which is without a doubt the single most significant development in web technology since the turn of the millennium.

No comments: