AJAX: What and Why?

by Lewis Berman

This Fall, Loyola is offering CS 715, Developing Rich Internet Applications with AJAX. AJAX, appearing on the scene in 2005, is an exciting collection of cooperative technologies. So just what is AJAX, and what can it do?

Once upon a time all web pages were "static." You requested a page, either by typing in its URL or clicking a link to it. Your browser sent the request across the Internet to the web server. The web server responded by sending your page, your browser loaded the page, and finally, you looked at that page until you requested a new one. The situation is depicted below.

Your web browser and computer didn't do much in between web requests. You couldn't update just one part of the page or continuously control something on the page. You just looked at content that sat there until the next full page load.

A series of innovations helped to improve the situation: iFrames, Java applets, ActiveX controls, and JavaScript, a language built into browsers. JavaScript added programmable processing capability to the web page. Two important aspects of JavaScript are

• its ability to recognize events. For example, a mouse click on a control within a web form could cause JavaScript code to run that could populate default values in the form or validate that required fields had been filled in properly.
• its ability to store information locally in the browser, retrieve it, and operate upon it at any time. Information is stored in the Document Object Model (DOM) within the browser. Some of the stored information belongs to the page, so it is available as long as the page is loaded. Other information can persist in between page loads.

Eventually JavaScript, HTML, CSS (Cascading Style Sheets), XML, and several other technologies coalesced into AJAX - Asynchronous JavaScript and XML. While there isn't room here to fully describe AJAX, we discuss one of its key concepts - asynchronous loading of data in between user-initiated web requests. This concept is employed by map display sites such as Google Maps. How do they retrieve and display previously unvisited map areas as the user traverses the map?

You request a map. During initial web page fulfillment, the web server sends a few adjacent map fragments to your web browser, as shown below. The map segments are stored in the Document Object Model. In the map below, the web browser is displaying the middle segment containing "Bhola."

Suppose the user scrolls (moves the viewing area) north, centering the map display at the north-most area already retrieved, the one containing Dhaka. JavaScript code running within the web browser detects the mouse events controlling the move and notifies the web server, anticipating possible further moves to the north. The web server provides the new map segments north of the Dhaka segment. This all occurs through a TCP/IP network transaction behind the scenes, invisible to the user, resulting in the expanded collection of loaded map segments shown below.

The user may now seamlessly move further north. As the user visits new map segments at or near the edge of the loaded set, further new segments are loaded in the background, while the user may be simultaneously exploring the map or doing other things. The web experience has become more interactive.

To maintain the impression of interactivity, the data requests and responses over the network must be fast and lightweight. Before AJAX, the browser's web request and web server's response was a complete transaction, as shown in the first diagram above. To provide efficiency for repeated requests and responses, AJAX can keep the connection open after the page is initially loaded. The hidden requests and responses can occur quickly over the still-open network connection The connection may persist until the user leaves the web page or until a given period of inactivity (say, 5 minutes) has transpired.

Because AJAX opens up the web experience to be more interactive and seamless, one of the technologies it often utilizes is jQuery, an advanced, open-source collection of JavaScript functions. jQuery interacts closely with the DOM to store, display, and operate upon information retrieved via web transactions and AJAX requests. JQuery's library has built-in functions to support AJAX web requests, allowing data to be loaded from the server without a full browser page refresh. jQuery.get() requests and receives data from the web server, using an HTTP GET request. Going one step further, jQuery.getScript() requests a JavaScript file from the server, loads it, and executes it. jQuery's AJAX functions are described online in the AJAX section of the jQuery API documentation.

Amazon and other online booksellers utilize AJAX and jQuery. When you type in a book title, your browser has the ability to display a set of book title suggestions. (See Amazon.com.) Your partially-entered search "Java 6" results in the display of multiple book selections including "Java 6 Illuminated" and "Java 6 in 21 Days." Try that and you'll see how fast AJAX can be. Sun/Oracle and Microsoft, as well as major organizations such as online booksellers, have both embraced jQuery as a core technology.

This Fall's CS 715 course will explore the world of AJAX. Course participants will need to have completed CS 712, Web Application Development with Servlets and JavaServer Pages (JSP), as programming will be done on the server side using those technologies. Proficiency with Servlets and JSP may substitute for CS 712. For more information, contact Lewis Berman at (410) 617-2587 or at inquiry@cs.loyola.edu.

QUIZ! Which countries appear in the maps above?

Further reading:

Ajax with Java     Ajax in ASP.Net     JQuery

Lewis Berman is the Director of Program Operations for the Computer Science and Software Engineering graduate programs.