Saturday, February 23, 2013

Cross Browser XMLHttpRequest Explained

Modern web browsers (Chrome, Firefox, IE7+, Opera, and Safari), include a native XMLHttpRequest object for creating AJAX requests. However, we often want to support IE6 as well, and that requrires using an ActiveXObject instead of a native XMLHttpRequest object (note, IE5 and IE5.5 are obsolete and should no longer be supported). But there is often some confusion revolving around which version(s) of MSXML to use to support IE6.
Microsoft has release several versions of MSXML, but only 2 of those versions (6.0 and 3.0) should be used. According to Microsoft [blogs.msdn.com], 6.0 has the best security, performance, reliability, and W3C conformance, and 3.0 is the preferred "fallback". So, we can now define our function which will return an instance of an XMLHttpRequest object (or the ActiveXObject equivalent for IE6):

/** 
 * Gets an XMLHttpRequest. For Internet Explorer 6, attempts to use MSXML 6.0,
 * then falls back to MXSML 3.0.
 * Returns null if the object could not be created. 
 * @return {XMLHttpRequest or equivalent ActiveXObject} 
 */ 
function getXHR() { 
  if (window.XMLHttpRequest) {
    // Chrome, Firefox, IE7+, Opera, Safari
    return new XMLHttpRequest(); 
  } 
  // IE6
  try { 
    // The latest stable version. It has the best security, performance, 
    // reliability, and W3C conformance. Ships with Vista, and available 
    // with other OS's via downloads and updates. 
    return new ActiveXObject('MSXML2.XMLHTTP.6.0');
  } catch (e) { 
    try { 
      // The fallback.
      return new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } catch (e) { 
      alert('This browser is not AJAX enabled.'); 
      return null;
    } 
  } 
} 

If you don't care about error handling or whether IE6 users will use MSXML 6.0 and you're perfectly content with IE6 users using the stable (though perhaps not as efficient and high-performing) MSXML 3.0, then you can shorten your code to this:


/** 
 * Gets an XMLHttpRequest. For Internet Explorer 6, attempts to use MXSML 3.0.
 * @return {XMLHttpRequest or equivalent ActiveXObject} 
 */ 
function getXHR() { 
  return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');