« TS-5033: IntelliJ IDEA: Integrated Team Environment | Main | TS-3361: Java™ EE 5 Platform: Even Easier With Tools »

TS-4489: Introduction to AJAX

AJAX borrows heavily from Dynamic HTML (DHTML), and was actually introduced in 2002 as part of Mozilla 1.0. AJAX is JavaScript using DHTML to dynamically render a web page with content obtained asynchronously from a remote server transparently to the user. This can be triggered by something like dragging the mouse, as in Google Maps.

The XMLHttpRequest (XHR) used in JavaScript functions is the backbone of AJAX. A quick demonstration showed why the XHR requests should be handled asynchronously using callback functions registered with the browser. Use of synchronous functions caused the browser thread to hang until a response was obtained by the server, which could result in a really bad user experience.

The presenters inisisted that applications like Google Maps are actually fairly simple UIs to build because of AJAX. They were actully able to come up with a clone of Google Maps in merely 3 hours.

There are a number of tools available for browsers like Firefox that use AJAX to improve the browsing experience. One such tool is GreaseMonkey, which allows users to inject AJAX content into any web page. For example, you could inject AJAX content into an Amazon page in order to view competitors prices or related information on the web.

Debugging DHTML can be extremely difficult since the content of the page can change at will. So, it's valuable to have tools like the DOM Inspector present in the Safari and Firefox web browsers. This will allow you view the HTML document graph in real-time, regardless of how the page looked when transmitted over-the-wire.