Understanding Ajax: Page 3 | WebReference

Understanding Ajax: Page 3


[previous][next]

Understanding Ajax: Getting Started

2.1.7 readyState Reference

Table 2-1 shows the possible values for the readyState variable. It will return a number representing the current state of the object. Each request will progress through the list of readyStates.

Table 2-1 readyState Levels

readyState Status Code

Status of the XMLHttpRequest Object

(0) UNINITIALIZED

The object has been created but not initialized. (The open method has not been called.)

(1) LOADING

The object has been created, but the send method has not been called.

(2) LOADED

The send method has been called, but the status and headers are not yet available.

(3) INTERACTIVE

Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available.

(4) COMPLETED

All the data has been received, and the complete data is available in the responseBody and responseText properties.

The readyState variable and the onreadystatechange event handler are linked in such a way that each time the readyState variable is changed, the onreadystatechange event handler is called.

2.2 Cross-Browser XMLHttpRequest

One of the attributes that have made XMLHttpRequest such a popular transport for Ajax requests is that it is easy to use in a way that is compatible across multiple browsers. The big two browsers, IE and Firefox, provide the same basic API. This consistency makes for a similar development experience. Opera and Safari also support the same basic API, but only in their more recent versions.

When you are writing cross-browser, the first problem you need to overcome is that XMLHttpRequest is an ActiveX object in IE, and it’s a normal JavaScript object in Mozilla and the other browsers. There are a number of approaches to overcoming this problem, including optional JScript code for IE, but I find that the simplest solution is just to use exceptions. Listing 2-1 shows an example that tries every version of the XMLHTTP ActiveX object, if needed. This helps make our implementation as robust as possible. The function also throws an exception if it’s not possible to create an XMLHttpRequest object. This gives us a way to give error messages or to fall back to IFrame requests, if needed.

Listing 2-1 Cross-Browser XMLHttpRequest Creation

The overall pattern of this code is simple: Create an XMLHttpRequest instance in the most optimal way possible, as shown in line 6. This creation should always succeed on Mozilla-based browsers, such as Firefox, on Opera, and on the upcoming IE 7.

If XMLHttpRequest doesn’t exist, catch the exception that is thrown, as shown in line 7. Getting an exception means you’re on IE or an old browser. To test for IE, attempt to create an ActiveX version of XMLHttpRequest, which is accomplished by the following:

  1. Looping over all possible ActiveX identifiers. This action will create an ActiveX instance for each identifier until the creation succeeds, setting the success flag to true, as shown in lines 9–20.
  2. If creation is successful, returning an XMLHttpRequest instance, as shown in line 25. Otherwise, throwing a JavaScript exception, as shown in line 22.

This approach allows for minimal overhead if the browser supports a native XMLHttpRequest object while fully supporting IE. It also gives us an error if XMLHttpRequest isn’t supported at all. This error could be displayed to the user at this point, or you could insert another communication approach, such as hidden IFrames.


[previous][next]

URL: