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