What is “Ajax”?

Ajax is actually a family of technologies that have been available for years. The means to make requests to the server using only JavaScript were built into Internet Explorer 5.5, but the possibilities of the technology were overlooked. It was only in 2005 that the techniques were rediscovered and used, notably to excellent effect in Google’s » GMail web application.
The term Ajax, which stands for “Asynchronous JavaScript and XML”, was first coined by Jesse James Garrett in his somewhat infamous article, » Ajax: A New Approach to Web Applications.

So let’s take each of those parts in isolation. Ajax is:

Asynchronous: This means that when you send a request, you wait for the response to come back, but are free to do other things while you wait. The response probably won’t come back immediately, so you set up a function that will wait for the response to be sent back by the server, and react to it once that happens.

JavaScript: JavaScript is used to make a request to the server. Once the response is returned by the server, you will generally use some more JavaScript to modify the current page’s document object model in some way to show the user that the submission went through successfully.

XML: The data that you receive back from the server will often be packaged up as a snippet of XML, so that it can be easily processed with JavaScript. This data can be anything you want, and as long as you want.

There’s nothing really new about what is happening here. We’re requesting a file (which will often be a server-side script, coded in something like PHP), and receiving a page as the response. This is how the web works already — the only difference is that now we can make these requests from JavaScript.

AJAX BASICS

Ajax is shorthand for Asynchronous JavaScript and XML (and DHTML, and so on).

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications.

Start looking at Ajax and how to turn your clunky Web interfaces into responsive Ajax applications.
Old technology, new tricks

When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill down into several different technologies The good news is that you might already know a decent bit about many of these technologies -- better yet, most of these individual technologies are easy to learn.

Here are the basic technologies involved in Ajax applications:

• HTML is used to build Web forms and identify fields for use in the rest of your application.
• JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications.
• DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML.
• DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.

The XMLHttpRequest object

To make all this flash and wonder actually happen, you need to become intimately familiar with a JavaScript object called XMLHttpRequest. This little object -- which has actually been around in several browsers for quite a while -- is the key to Web 2.0, Ajax, and pretty much everything else you learn about in this column for the next several months. To give you a really quick overview, these are just a few of the methods and properties you'll use on this object:

• open(): Sets up a new request to a server.
• send(): Sends a request to a server.
• abort(): Bails out of the current request.
• readyState: Provides the current HTML ready state.
• responseText: The text that the server sends back to respond to a request.

First, you need to create a new variable and assign it to an instance of the XMLHttpRequest object. That's pretty simple in JavaScript; you just use the new keyword with the object name,

Create a new XMLHttpRequest object