How Does Ajax Work?

With Ajax, Web applications finally start feeling like desktop applications to your users. That’s because Ajax enables your Web applications to work behind the scenes, getting data as they need it, and displaying that data as you want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon,

it’ll be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine. To help you understand how Ajax works, the following sections look at Ajax from a user’s and a programmer’s perspective.

A user’s perspective

To show you how Ajax makes Web applications more like desktop applications, I’ll use a simple Web search as an example. When you open a typical search engine, you see a text box where you type a search term. So say you type Ajax XML because you’re trying to figure out what XML has to do with Ajax. Then, you click a Search the Web button to start the search. After that, the browser flickers, and a new page is loaded with your search results.

A developer’s perspective

In the article "Ajax: A New Approach to Web Applications" (www.adaptivepath.com/publications/essays/archives/000385.php), Jesse James Garrett, who was the first to call this technology Ajax, made important insights about how it could change the Web. He noted that although innovative

new projects are typically online, Web programmers still feel that the rich capabilities of desktop software were out of their reach. But Ajax is closing the gap.

So how does Ajax do its stuff? The name Ajax is short for Asynchronous JavaScript and XML, and it’s made up of several components:

Browser-based presentation using HTML and Cascading Style Sheets (CSS).

- Data stored in XML format and fetched from the server

- Behind-the-scenes data fetches using XMLHttpRequest objects in the browser

- JavaScript to make everything happen
JavaScript is the scripting language that nearly all browsers support, which will let you fetch data behind the scenes, and XML is the popular language that lets you store data in an easy format.

Here’s an overview of how Ajax works:

1. In the browser, you write code in JavaScript that can fetch data from the server as needed.

2. When more data is needed from the server, the JavaScript uses a special item supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes — without causing a page refresh.

The JavaScript in the browser doesn’t have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and spring into action when the data does appear (that’s called asynchronous data retrieval).

3. The data that comes back from the server can be XML, or just plain text if you prefer. The JavaScript code in the browser can read that data and put it to work immediately. That’s how Ajax works — it uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes, and handles the XML (or other text) data sent back from the server. I explain how all these components work together in more detail.

This also points out what you’ll need to develop Web pages with Ajax. You’ll add JavaScript code to your Web page to fetch data from the server, and you’ll need to store data and possibly write server-side code to interact with the browser behind the scenes. In other words, you’re going to need access to an online server where you can store the data that you will fetch using Ajax. Besides just storing data on the

server, you might want to put code on the server that your JavaScript can interact with. For example, a popular server-side language is PHP, and many of the examples in this book show how you can connect to PHP scripts on Web servers by using Ajax. Getting you up to speed on that language if you’re interested. So you’re going to need a Web

server to store your data on, and if you want to run server-side programs as well, your server has to support server-side coding for the language you want to work with (such as PHP).