Cross Browser XMLHttpRequest

written by: Carol Rudenberg; article published: year 2006, month 10;


In: Root » Computers and technology » AJAX and JavaScript » Cross Browser XMLHttpRequest

Dutch French Spanish Portuguese Italian German Japanese Chinese Korean Russian Arabic Bookmark and Share this Article

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. Below is 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.

Cross-Browser XMLHttpRequest Creation
1  // function to create an XMLHttpClient in a cross-browser manner
2  function initXMLHttpClient() {
3      var xmlhttp;
4      try {
5          // Mozilla / Safari / IE7
6          xmlhttp = new XMLHttpRequest();
7      } catch (e) {
8           // IE
9           var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
10                                     'MSXML2.XMLHTTP.4.0',
11                                     'MSXML2.XMLHTTP.3.0',
12                                     'MSXML2.XMLHTTP',
13                                     'Microsoft.XMLHTTP' );
14          var success = false;
15          for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
16              try {
17                   xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
18                      success = true;
19                } catch (e) {}
20          }
21          if (!success) {
22              throw new Error('Unable to create XMLHttpRequest.');
23          }
24     }
25     return xmlhttp;
26 }

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 920.
  2. If creation is successful, returning an XMLHttpRequest instance, as shown in line 25. Otherwise, throwing a JavaScript exception, as shown in line 2

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.

Disclaimer

1) E-articles is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringement, please read the terms of service and contact us to investigate the problem.
2) E-articles is not responsible for inaccuracies, falsehoods, or any other types of misinformation this article may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here.

link to this article