Mastering Ajax, Part 2nd: Making asynchronous requests using JavaScript and Ajax

Using XMLHttpRequest in WEB requests

Most WEB applications use the request/response model to obtain complete HTML pages from the server. Often click on a button, wait for the server to respond, and then click another button, and then wait, such a repetitive process. With Ajax and XMLHttpRequest objects, you can use a request/response model that eliminates the need for the user to wait for a response from the server. In this article, Brett McLaughlin describes how to create a XMLHttpRequest instance that adapts to different browsers, builds and sends requests, and responds to the server.

In the previous installment of this series (see Resources for links), we introduced AJAX applications and examined the basic concepts that drive AJAX applications. The core of this is many of the technologies you might have learned: JavaScript, HTML and XHTML, a bit of dynamic HTML, and the DOM (Document Object model). This article will zoom in on one point and focus on specific Ajax details.

In this article, you will begin to touch the most basic and basic Ajax-related objects and programming methods: XMLHttpRequest objects. This object is actually just a public thread spanning all Ajax applications, and you may have expected that only a thorough understanding of the object would give full play to the potential of programming. In fact, sometimes you'll find that you can't use XMLHttpRequest to use XMLHttpRequest correctly. What the hell is going on here?

WEB 2.0 Glimpse

Before delving into the code, take a look at the recent view--be sure to be very clear about the concept of Web 2.0. When you hear the Word Web 2.0, you should first ask "What is Web 1.0?" "Although you rarely hear about Web 1.0, it actually refers to a traditional web with a completely different request and response model." For example, click a button on the Amazon.com site or enter a search term. A request is sent to the server, and then the response is returned to the browser. This request is not just a list of books and bibliographies, but another complete HTML page. So when a Web browser is redrawn with a new HTML page, you may see flicker or jitter. In fact, you can see the requests and responses clearly from each new page you see.

Web 2.0 (to a large extent) eliminates this visible reciprocating interaction. For example, visit sites such as Google Maps or Flickr (see Resources for links to these support Web 2.0 and Ajax sites). For example, on Google Maps, you can drag the map, zoom in and out, and only a few redraw operations. Of course there are still requests and responses, but they are hidden behind the scenes. As a user, the experience is more comfortable and feels like a desktop application. This new feeling and paradigm is what you realize when someone mentions Web 2.0.

The need to be concerned is how to make these new interactions possible. Obviously, you still need to make requests and receive responses, but it is the HTML redraw that interacts with each request/response that makes for slow, clumsy Web interaction. So it's clear that we need a way to make requests and receive responses that only contain the data that you need rather than the entire HTML page. The only time you need to get the whole new HTML page is when you want the user to see the new page.

Most interactions, however, add details to existing pages, modify body text, or overwrite existing data. In these cases, Ajax and Web 2.0 methods allow data to be sent and received without updating the entire HTML page. For those who often surf the internet, this ability can make your applications feel faster, respond more promptly, and let them visit your site from time to times.

XMLHttpRequest Introduction

To truly realize this magnificent miracle, you must be very familiar with a JavaScript object, that is, XMLHttpRequest. This small object has actually been in several browsers for some time, and it is the core of Web 2.0, Ajax, and most of the rest of this column that will be introduced in the next few months. To give you a quick overview of it, here are a few of the few methods and properties that will be used for that object.

open (): Creates a new request to the server.

send (): Sends a request to the server.

abort (): Exits the current request.

readystate: Provides the ready state of the current HTML.

ResponseText: The request response text returned by the server.

If you don't know these (or any of them), you don't have to worry about each of the methods and properties in the next few articles. What you should know now is to be clear about what to do with XMLHttpRequest. Note that these methods and properties are related to sending requests and handling responses. In fact, if you see all the methods and properties of XMLHttpRequest, you'll find that they all have to do with very simple request/response models. Obviously, we're not going to encounter a particularly new GUI object or some very mysterious way to create user interaction, and we'll use very simple requests and very simple responses. It doesn't sound like much attraction, but using that object can completely change your application.