AJAX: Asynchronous Javascript And XML

What is it?

AJAX is a new model of web development: it uses newer browser technology to dynamically modify HTML documents by requesting and loading XML documents from remote servers in the background (asynchronously). AJAX replaces the model whereby each web request results in a page refresh or a new page load.

AJAX makes using the web less like browsing documents and more like using standard software applications. As such, it represents significant changes, and so has vocal proponents and opponents.

When it might be appropriate

• rich user experience is desired
• interfaces that require lots of small actions (e.g. reordering a list)
• some interfaces that might have previously used Flash to avoid page refreshes

Problems associated with AJAX

• Can frustrate web conventions and expectations based upon seeing web-pages as documents:
• Back button
• Latency in performing actions
• Dynamic changes in the document structure
• Older browsers not supported.
• Less accessible: accessibility conventions and techniques may be more difficult to implement.
• More difficult to debug.
• Search engine indexing can be frustrated, as can deep-linking

AJAX examples

• RSS Newsreader: http://www.nigelcrawley.co.uk/bbc/
• SproutLiner, a project-management tool: http://sproutliner.com/
• Time tracker: http://www.formassembly.com/time-tracker/
• Spell checking example: http://www.broken-notebook.com/spell_checker/
• Lots of commercial sites use AJAX: http://www.flickr.com,
  http://www.backpackit.com

How do I use it?

AJAX is still mostly for web developers and programmers. Some general-purpose scripts and code is becoming available, but support in tools like Dreamweaver is still missing. To use AJAX, you have to "get your hands dirty". That will change over time.

I've provided a scripts that provide some sample functionality. To "hook up" this functionality to a web page, you need to know 2 techniques:

1. How to reference Javascript libraries in a web page. To do this, in the element of the HTML file:
   

       <script type="text/javascript" src="[path to JS file]" />
   

2. How to hook up Javascript functions to HTML links and buttons. Use this pattern:
   

   <a href="#" onclick="jsFunctionName()" onkeypress=" jsFunctionName()" title="explanation of what clicking this link does">Link</a></code>

As always, when using scripts by others you need to be careful to use scripts from a reputable source!

• Demo
• Javascript file



Explore

Hook up the javascript library xmlloader.js and experiment with loading XML/XHTML documents into an existing web page.