Advenir: Computer Training. Internet Marketing. New Media Development.

An Ajax Introduction

Ajax, for Asynchronous JavaScript and XML, is a collection of web development tools used to create Rich Internet Applications (RIA). Ajax allows web browsers to interact with web servers via small requests and update the loaded web page without actually reloading the entire page after each request. This gives the site an immediate increase in its appearance of interactivity, a significant speed boost, as the web server only has to process much smaller transactions, and a usability edge over repeatedly reloaded static pages.

Introduction

Ajax is accomplished using a combination of:

Standards-Based Markup and Styling using XHTML, and CSS.
DOM manipulation via JavaScript, Jscript or some other ECMAScript variant.
The XMLHttpRequest object for asynchronous interaction with the web server. (or possibly an IFrame object)
XML/XSLT, HTML, plain text or some other data interaction with the server.

Like many other acronyms we’re familiar with, DHTML - Dynamic HTML or LAMP - Linux Apache MySQL PHP, Ajax is a collection of technologies working together, not a particular technology in and of itself.

The use of Ajax in web development will often be transparent to the average surfer. In fact, many of the Web 2.0 sites that people loveThey will merely appreciate the speed and interactivity of the sites they are using, for instance, dragging around a map on Google Maps or working with photographs on Flickr. The new Windows Live site from Microsoft is a dramatic improvement over Google’s offering and provides a visual and content rich homepage alternative.

Google’s continued development and acquisition of websites that use Ajax to deliver Rich Internet Applications would suggest a potential shift from desktop applications to Internet-based applications. For users, this would be welcome progress, allowing access to their applications and data from any Internet connected computer and an end to desktop software updates and licensing.

Some Ajax applications of note:

Productivity: Basecamp collaborative project management and Backpack organization.
Office: Writely Word Processor, NumSum Spreadsheets, Kiko Calendar.
Entertainment: Iron Sudoku, Babble.
Music: Pandora.
Maps: Google Maps.
Search: Google Suggest.
Social: TagWorld.
Messaging: Meebo Multi-IM Client, Zimbra Enterprise Messaging.
Mail: GMail, Yahoo Mail, Windows Live Mail.

The Good News

Interactivity

Ajax is perfect for developing mini-applications within a webpage such as small search engine requests and results, web form automation, editing records, profiles, or account options, sorting tables or expanding individual areas of content.

Compatibility / Portability

Currently, all major browsers support Ajax applications.

The Bad News

Usability Issues

Bookmarks - Since pages are no longer completely static, a bookmark of a particular page may not return the expected page contents.

Back Button - As with bookmarks, using the back button may not present the user with the last Ajax interaction on a particular page, but instead, an entirely different preceding page.

Network Latency

Because the user is not requesting the entire page to be reloaded, Ajax applications can cause confusion if the delay between each user’s request and the server’s response (network latency) becomes significant. Allowing the application to provide a visual display of progress or status can help minimize any user confusion.

JavaScript

Ajax requires JavaScript to be enabled in a user’s browser for any updating to the DOM to be processed. If a user has disabled JavaScript, they will be unable to see any updates to the page they are viewing and will need to be redirected to a static page containing the new content. (Internet Explorer 6 and earlier also need ActiveX to be enabled to utilize the XMLHttpRequest object, though Internet Explorer 7 will move this functionality to JavaScript)

Accessibility

Developers wishing to keep their pages WAI accessible may wish to provide a way for their Rich Internet Applications to degrade gracefully for users who are not using a visual browser. Users who are not viewing the web page visually will need an entirely refreshed page to view any server interactions.

Supported Ajax Browsers

Any gecko-based browsers like Firefox or Mozilla or Netscape 7.1+
Microsoft Internet Explorer 5.0+ and derivatives (non-Mac)
KHTML API 3.2+ based browsers like Konqueror 3.2+ and Apple Safari 1.2+
Opera 8.0+

Non-Supported Ajax Browsers

Microsoft Internet Explorer 4.0 and below
Opera 7 and below
Text based browsers like Lynx
Speech-synthesis or Braille browsers for the visually impaired