The technical subject has always been dry and uninteresting, but the stories surrounding the development of AJAX in the realm of multimedia Internet applications created an incredible attraction throughout 2005.
The Web 2.0 generation had just begun and still has a long way to go to change what has become familiar to everyone today. A key player in the second phase of the web is the AJAX technology suite. Although the world was not quite ready to embrace it yet, many believe that AJAX applications are developing even faster than Moore’s Law – the driving force behind the computing industry.
What is AJAX?
AJAX, short for Asynchronous JavaScript and XML, is a set of tools that enhances web application speed by breaking down data and only displaying what is necessary, rather than reloading the entire web page. AJAX is not a standalone technology but rather a combination of several technologies. Here, HTML and CSS are utilized for data display, the DOM (Document Object Model) presents dynamic information, the XMLHttpRequest object exchanges data asynchronously with the web server, while XML is the primary format for data transfer. These are all existing technologies, but JavaScript has assembled them to perform impressive “missions.”
Most stories about the origins of AJAX begin with Microsoft’s development of Remote Scripting technology in 1998. However, the method of asynchronously loading content on a web page first appeared in the IFRAME element of Internet Explorer 3 (1996) and the LAYER element of Netscape 4.0 in 1997. When Internet Explorer 4.0 was introduced, Microsoft employed a different DOM model. By 2000, Netscape had completely lost its browser market share to Bill Gates’ software company, and the LAYER element was no longer of interest to web developers.
It wasn’t until a few years later that AJAX regained attention from the tech community and became a tool for improving user interfaces in web applications. The term itself only emerged about a year ago (February 2005) in a famous article by Jesse James Garrett on Adaptive Path. Since then, AJAX has become central to all discussions regarding the Web 2.0 generation.
How Does AJAX Work?
 |
Traditional web application (left) and AJAX application. (Adaptive Path) |
For a long time, people have imagined a computer application that would be saved and run entirely on the web instead of being confined to a hard drive. However, that vision has not yet come to fruition due to the principle that all operations must be performed via HTTP (HyperText Transfer Protocol). User actions on a web page create an HTTP request to the server. The server performs several processes such as retrieving data, computation, validating information, modifying memory, and then sends back a complete HTML page to the client. Technically, this method sounds reasonable, but it is quite inconvenient and time-consuming, as users are left waiting while the server performs its duties.
To overcome this limitation, developers introduced a middleware mechanism – AJAX processing – between the client and the server. This acts like an additional layer for the application to reduce the “back and forth” of information and decrease response time. Instead of refreshing the entire page, it only reloads the changed information while keeping other parts intact. Thus, when browsing a page that supports AJAX, users never see a blank window or the hourglass icon – indicators that the server is busy. For example, on a photo website, with traditional applications, the entire page containing images would have to reload from scratch if there were any changes. However, with AJAX, DHTML only replaces the header and the modified section, resulting in smooth and fast transactions.
 |
Synchronous interaction in traditional web applications (above) and asynchronous interaction in AJAX applications. (Adaptive Path) |
“Every user action sends a JavaScript command to the AJAX processor, instead of creating an HTTP request to query the server,” Jesse James Garrett noted in the first article defining the term. “If anything is needed from the server, such as downloading additional interface code or retrieving new data, AJAX will send a request to the server asynchronously, typically using XML, without interrupting the user’s interaction with the web application.”
Popular AJAX Applications
Google Suggest displays suggested terms almost instantly as users type their keywords. With Google Maps, people can track changes, move, and drag the map just like in a desktop environment. Google Suggest and Google Maps are two prominent examples of the new generation of web applications. The world’s leading search engine has invested heavily in the development of AJAX. Almost every program they have recently introduced, from Orkut, Gmail to the beta version of Google Groups, are AJAX applications.
Many other companies are following this trend, such as the photo-sharing site Flickr (now owned by Yahoo) or Amazon’s search tool A9.com. Yahoo plans to launch Yahoo Mail Beta 1 globally, which utilizes AJAX (currently in limited testing) in the coming weeks. The new mailbox will be equipped with many Web 2.0 features such as RSS, preview mode, etc. Microsoft is also rolling out its Windows Live Mail and Windows Live Messenger programs that support AJAX.
The above projects show that AJAX is not a distant technology but is present in the real world, from simple applications like Google Suggest to sophisticated and complex ones like Google Maps.
The biggest challenge when creating AJAX applications does not lie in the technical aspect as its components have existed for a long time, are stable, and are well-understood. The issue here is that “design experts need to forget about the limitations of the web and start thinking broader and deeper about the capabilities of technology and innovate it in their own unique ways,” remarked Alexei White, production director of an eBusiness company (USA). “AJAX will gradually diminish Microsoft’s influence in the market. While it may not completely overshadow it, it will provide alternative features for most products like Office.”
Disadvantages of AJAX
AJAX can contribute to a new generation of web applications (such as colr.org or backpackit.com). However, it is also a “dangerous” technology that can cause numerous user interface issues. For instance, the “Back” button is highly valued in standard web interfaces. Unfortunately, this function does not work well with JavaScript, and users cannot retrieve previous content when pressing the Back button. Therefore, a small mistake can lead to data on the page being altered and difficult to recover. This is one of the main reasons many people do not support JavaScript applications.
Additionally, users cannot save web addresses in the Favorites (Bookmarks) for later viewing. Due to the middleware used for transactions, AJAX applications do not have a fixed address for each piece of content. This flaw can cause AJAX to lose points in the eyes of users.
Browsers that support AJAX include Microsoft Internet Explorer 5.0 and above; Gecko-based browsers such as Mozilla, Firefox, SeaMonkey, Epiphany, Galeon, and Netscape 7.1; browsers containing KHTML API 3.2 and above like Konqueror, Apple Safari, etc.
CSS (Cascading Style Sheets) is used to describe how documents written in HTML, XHTML, XML, SVG, XUL, etc., should be presented. The technical specifications of CSS are managed by the World Wide Web Consortium (W3C).
DOM (Document Object Model) is an application programming interface (API). Typically, the DOM takes the form of a tree structure and is used to access HTML and XML documents. The DOM model operates independently of the operating system and is based on object-oriented programming techniques to describe documents.
DHTML, or Dynamic HTML, creates a web page by combining components: static HTML markup language, client-side scripting languages (like JavaScript), and CSS and DOM formatting languages. Due to its rich capabilities, DHTML is also used as a tool for building simple games in browsers.
Hai Nguyen
