Digital Elephant Productions
AJAX techniques
AJAX is shorthand for a collection of techniques that have been available to web designers for some time, but which have only recently come into wide use. Use of these techniques makes a website appear more like an interactive application, and less like a collection of static pages. The underlying architecture, though, is that of the client-server computing model that has been around for over twenty years: when some event occurs, the client (browser) sends a request (either for information, or to cause some action) to the server, which returns a reply.
The thing that makes this appealing is that a web page already has a rich set of events built into it, any of which can trigger a client-server exchange. The details of these exchanges are controlled by client-side code (JavaScript) and server-side code (CGI, PHP, ASP, ...); the user sees only the resulting actions displayed on the browser's screen. Any number of changes can occur as results of events on the page (usually mouse clicks, though other events can serve as triggers, too).
Where the application requires a major change in the web page elements displayed to the user, I favor using JavaScript to insert revised content into the innerHTML property of a DIV. The browser will display the revised content exactly as if a new page had been loaded, but much of the page structure can remain as it was. The differences are subtle, but perhaps important: first, since less data has to travel from server to client, response is often faster; second, since the browser does not receive a new page, it does not advance its history list. This means that the user can exit the entire application by clicking the BACK button on the browser once.
Purists will object that the use of the innerHTML scheme of inserting content into a page is not a W3C standard. They are correct. But as a practical matter, both Internet Explorer and EOMB (every other modern browser) support this property of a web page element, and so I feel free to use it without fear of running into serious cross-browser difficulties. The alternative is pretty hairy: removing and replacing an element of the document tree using JavaScript, which then must handle all the element cases separately.