Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

At the center of many of the hacks in this book is the XMLHttpRequest object, which allows JavaScript to fetch bits of server data while the user is happily playing with the rest of your application. This object has its own API, which we will summarize in this introduction.

"Detect Browser Compatibility with the Request Object" [Hack #1] covers setting up the request object in JavaScript. Once the object is initialized, it has several methods and properties that you can use in your own hacks.

The following list shows the properties supported by the request objects defined by most of the major browsers, such as Internet Explorer 5.0 and later, Safari 1.3 and 2.0, Netscape 7, and Opera's latest releases (such as Opera 8.5). Mozilla Firefox's request object has additional properties and methods not shared by the request objects of other major browsers,^[2] but it also supports all of the following:

^[2] The Mozilla Firefox XMLHttpRequest object has onload, onprogress, and onerror properties that are event listener types. Firefox has also defined addEventListener( ), dispatchEvent( ), overrideMimeType( ), and removeEventListener( ) methods. See http://www.xulplanet.com/references/objref/XMLHttpRequest.html for more details on these Firefox request object members.

onreadystatechange

Callback function; the function assigned to this property is called whenever readyState changes.

readyState

Number; 0 means uninitialized, open( ) has not yet been called; 1 means loading, send( ) has not been called; 2 means loaded, send( ) has been called, and headers/status are available; 3 means interactive, responseText holds partial data; 4 means completed.

responseText

string; the plain text of the response.

responseXML

DOM Document object; an XML return value.

status

Response status code, such as 200 (Okay) or 404 (Not Found).

statusText

string; the text associated with the HTTP response status.

The methods supported include:

abort( )

void; cancels the HTTP request.

getAllResponseHeaders( )

string; returns all of the response headers in a preformatted string (see "Dig into the HTTP Response" [Hack #9]).

getResponseHeader(string header)

string; returns the value of the specified header.

open(string url,string asynch)

void; prepares the HTTP request and specifies whether it is asynchronous or not.

send(string)

void; sends the HTTP request.

setHeader(string header,string value)

void; sets a request header, but you must call open( ) first!