Hack 1. Detect Browser Compatibility with the Request Object

Use JavaScript to set up Microsoft's and the Mozilla-based browsers' different request objects.

Browser compatibility is an important consideration. You have to make sure the "engine" behind Ajax's server handshake is properly constructed, but you can never predict which browsers your users will favor.

The programming tool that allows Ajax applications to make HTTP requests to a server is an object that you can use from within JavaScript code. In the world of Firefox and Netscape (as well as Safari and Opera), this object is named XMLHttpRequest. However, continuing with the tradition established by IE 5.0, recent vintages of Internet Explorer implement the software as an ActiveX object named Microsoft.XMLHTTP or Msxml2.XMLHTTP.

Microsoft.XMLHTTP and Msxml2.XMLHTTP refer to different versions of software components that are a part of Microsoft XML Core Services (MSXML). Here's what our contributing IE expert says on this matter:

"If you use Microsoft.XMLHTTP, the ActiveXObject wrapper will try to initialize the last known good version of the object that has this program (or "prog") ID. This object, in theory, could be MSXML 1.0, but almost no one these days has that version because it has been updated via Windows Update, IE 6, or another means. MSXML 1.0 was very short-lived. If you use MSXML2.XMLHTTP, that signifies to the wrapper to use at least MSXML 2.0 libraries. Most developers do not need to use a specific version of MSXML, such as MSXML2.XMLHTTP.4.0 or MSXML2.XMLHTTP.5.0."

Although Microsoft and the engineers on the Mozilla project have chosen to implement this object differently, we will refer to the ActiveX and XMLHttpRequest objects simply as "request objects" throughout this book, because they have very similar functionality.

As a first step in using Ajax, you must check if the user's browser supports either one of the Mozilla-based or ActiveX-related request objects, and then properly initialize the object.

Using a Function for Checking Compatibility

Wrap the compatibility check inside a JavaScript function, then call this function before you make any HTTP requests using the object. For example, in Mozilla-based browsers such as Netscape 7.1 and Firefox 1.5 (as well as in Safari 2.0 and Opera 8.5), the request object is available as a property of the top-level window object. The reference to this object in JavaScript code is window.XMLHttpRequest. The compatibility check for these browser types looks like this:

if(window.XMLHttpRequest){     request = new XMLHttpRequest(  );     request.onreadystatechange=handleResponse;     request.open("GET",theURL,true);     request.send(null); }

The JavaScript variable request is to a top-level variable that will refer to the request object.

As an alternative model, the open-source library Prototype uses object-oriented JavaScript to wrap the request object into its own object, as in the object Ajax.Request (see Chapter 6).

If the browser supports XMLHttpRequest, then:

1. if(window.XMLHttpRequest) returns true because the XMLHttpRequest is not null or undefined.

2. The object will be instantiated with the new keyword.

3. Its onreadystatechange event listener (see the section "XMLHttpRequest" earlier in this chapter) will be defined as a function named handleResponse( ).

4. The code calls the request object's open( ) and send( ) methods.

What about Internet Explorer users?

Microsoft Internet Explorerrelated blogs mentioned, at the time this book went to publication, that IE 7 would support a native XMLHttpRequest object.

In this case, the window.XMLHttpRequest object will not exist in the browser object model. Therefore, another branch of the if test is necessary in your code:

else if (window.ActiveXObject){     request=new ActiveXObject("Microsoft.XMLHTTP");     if (! request){         request=new ActiveXObject("Msxml2.XMLHTTP");     }     if(request){         request.onreadystatechange=handleResponse;         request.open(reqType,url,true);         request.send(null);     } }

This code fragment tests for the existence of the top-level window object ActiveXObject, thus signaling the use of Internet Explorer. The code then initializes the request using two of a number of possible ActiveX program IDs (here, Microsoft.XMLHTTP and Msxml2.XMLHTTP).

You can get even more fine-grained when testing for different versions of the IE request object, such as Msxml2.XMLHTTP.4.0. In the vast majority of cases, however, you will not be designing your application based on various versions of the MSXML libraries, so the prior code will suffice.

The code then makes one final check for whether the request object has been properly constructed (if(request){...}).

Given three chances, if the request variable is still null or undefined, your browser is really out of luck when it comes to using the request object for Ajax!

Here's an example of an entire compatibility check:

/* Wrapper function for constructing a request object.  Parameters:   reqType: The HTTP request type, such as GET or POST.   url: The URL of the server program.   asynch: Whether to send the request asynchronously or not. */ function httpRequest(reqType,url,asynch){     //Mozilla-based browsers     if(window.XMLHttpRequest){         request = new XMLHttpRequest(  );     } else if (window.ActiveXObject){         request=new ActiveXObject("Msxml2.XMLHTTP");         if (! request){             request=new ActiveXObject("Microsoft.XMLHTTP");         }     }     //the request could still be null if neither ActiveXObject     //initialization succeeded     if(request){         initReq(reqType,url,asynch);     } else {         alert("Your browser does not permit the use of all "+               "of this application's features!");     } } /* Initialize a request object that is already constructed */ function initReq(reqType,url,bool){     /* Specify the function that will handle the HTTP response */     request.onreadystatechange=handleResponse;      request.open(reqType,url,bool);     request.send(null); }

"Use the Request Object to POST Data to the Server" [Hack #2] shows how to implement a POST request with XMLHttpRequest.