What Is AJAX?

Published: November 12, 2008

by Paul Tuohy

If you happen to dabble with any sort of Web development (or even if you don't), you have probably heard of Asynchronous JavaScript and Extensible Mark-up Language (XML)--better known as AJAX.

Depending on who you talk to AJAX is either "another flash in the pan" or "the greatest thing since sliced bread." As usual, the truth probably falls somewhere in between.

In this, the first of two articles, I want to discuss what AJAX is and why you might want to use it. In the following article I will give a simple example of using AJAX with an RPG CGIDEV2 program.

Briefly, What Is AJAX?

AJAX allows programmers to dynamically update an existing Web page as opposed to loading a new page. In other words, AJAX provides a means for the server to update the current Web page as opposed to sending a new page.

AJAX is not a programming language. It is a collection of techniques that allow a function to communicate with a server from within a Web page. These techniques make use of standard JavaScript objects to asynchronously retrieve data from a server. The data is retrieved from the server as XML, Hypertext Markup Language (HTML), or plain text. (It is easier to start with plain text and HTML.)

Here are some simple examples of where you might use AJAX:

• When a user selects a country on a form, populate the state list with a list of the states for that country; i.e., when the user selects a country, send the country code to the server which returns the list of states for that country and a function populates the state list on the form with the data returned.
• When a user enters a code on a form, retrieve and display the description of the item.
• Provide a list of suggestions as a user types in a search name.

The use of AJAX provides numerous ways of enhancing Web page interaction for a user.

History

In Web terms, the techniques used with AJAX are "old"; they have been around since the late 90's. They are a result of a progression of techniques used in Hidden Frames, IFrames, Dynamic HTML (DHTML), and XMLHTTP.

Most of these techniques were pioneered by projects at Google Labs. For example, Google Suggest uses AJAX to provide a list of search suggestions as you type into the search box, and Google Maps uses AJAX to allow you to scroll through a map (parts of the map are retrieved as you scroll) or it uses AJAX to show details of an item on a map as a pop-up.

But where did the term AJAX come from? In February 2005, Jesse James Garrett of Adaptive Path, LLC, published, Ajax: A New Approach to Web Applications, where he coined the term AJAX.

"Google Suggest and Google Maps are two examples of a new approach to Web applications that we at Adaptive Path have been calling AJAX. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what's possible on the Web."

The article led to a wave of AJAX articles, code samples, and debates. Suddenly, everyone was talking about AJAX.

The other main component in the success and rapid adoption of AJAX was the increase of broadband usage. Google Maps would not have succeeded on dial-up alone!

Why Is AJAX So Popular?

The popularity of AJAX cannot be put down to a catchy turn of phrase in an article. Providing a name for the techniques may have provided a focus, but that in itself is not enough to make programmers use it.

There are a few components that have led to the success of AJAX:

• All of the required objects are part of the browser. Additional plug-ins or downloads are not required (nothing to buy or install).
• AJAX provides capabilities formerly only available through server-side scripting (e.g., JavaServer Pages), Java applets, or ActiveX controls.
• Broadband provides the communications speed and satisfies any volume requirements.
• There are no longer myriad browsers. The industry seems to have standardized on Internet Explorer (IE), Firefox, and Opera (or at least requirements are defined by these three browsers).
• There are numerous toolboxes and frameworks available that simplify AJAX implementation and use.
• The Web is full of numerous examples of AJAX in action.

Really, What Is AJAX?

According to Garret, AJAX is a technique that combines and exploits some long-standing Web technologies:

• Using XHTML and Cascading Style Sheets (CSS) for structure and presentation.
• Displaying and manipulating pages using the Document Object Model (DOM).
• Using the browser's XMLHttpRequest object to transfer data between the client and the server.
• Using XML as the format for the data flowing between the client and the server.
• Using JavaScript to dynamically display and interact with all of the above.

Of all of these the important ones (as far is AJAX is concerned) are JavaScript and the XMLHttpRequest object. This is what you use to send a request to a server and retrieve its response. All of the others (XHTML, CSS, DOM, XML) are what you use to manipulate the Web page with the data retrieved from the server.

In the End

To make use of AJAX you must learn how to program in JavaScript and how to use the XMLHttpRequest object. You must also learn how to use JavaScript to manipulate a Web page. In other words, what do you do when data is returned?

For AJAX to work, JavaScript must be enabled in the browser. This is probably the largest hindrance to using AJAX, especially if you are deploying AJAX-enabled applications in an Internet environment where you cannot specify the client's browser configuration.

But be assured that AJAX has plenty to offer any i developer who writes programs for the Web. In the next article we will look at AJAX in action.

Paul Tuohy is CEO of ComCon, an iSeries consulting company, and is one of the co-founders of System i Developer, which hosts the RPG & DB2 Summit conferences. He is an award-winning speaker who also speaks regularly at COMMON conferences, and is the author of "Re-engineering RPG Legacy Applications," "The Programmers Guide to iSeries Navigator," and the self-study course called "iSeries Navigator for Programmers." Send your questions or comments for Paul to Ted Holt via the IT Jungle Contact page.

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot