Wednesday, March 16, 2011

Best practice for detecting AJAX/XmlHttpRequestSupport

I am trying to update an old JavaScript function used to detect support for AJAX (i.e. the XmlHttpRequest object). I've looked online (including SO) and found various solutions but I'm not sure which is the most efficient for simply detecting support.

The current function is:

    function IsSyncAJAXSupported()
 {
  var isSyncAJAXSupported = true;

  var xmlHttp = null;
  var clsids = ["Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0; i<clsids.length && xmlHttp == null; i++) {
   try {
     xmlHttp = new ActiveXObject(clsids[i]);
   } catch(e){}
  }

  if(xmlHttp == null && MS.Browser.isIE)
  {
   isSyncAJAXSupported = false;
  }
  return isSyncAJAXSupported;
 }

In Firefox 3, the above gives errors because MS is undefined.

I realise that using a library would be better but that's not an option for the short term. We are only supporting IE6 and above + recent versions of Firefox, Safari/WebKit and Opera.

What's the best way of getting a true/false for XmlHttpRequest support?

From stackoverflow
  • Don't!

    Or rather, don't waste time doing what many other people have done better.

    Try grabbing the source of jQuery or somesuch and "borrow" their methods; they've already invested the time to supporting as many browsers as possible (especially true in jQuery's case) so save yourself the time.

    HTH

    tjrobinson : This is how jQuery does it, though I'm not sure the best way of changing it so that it returns a boolean. var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  • My preferred code for this is:

    function CreateXMLHttpRequest()
    {
      // Firefox and others
      try { return new XMLHttpRequest(); } catch (e) {}
      // Internet Explorer
      try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
      //alert("XMLHttpRequest not supported");
      // No luck!
      return null;
    }
    

    You can easily add tests for variants of Microsoft objects...

    tjrobinson : Is there a way of doing the equivalent but without try/catches?
    tjrobinson : Also, your code doesn't directly answer the question - I'm after a boolean to show whether there is support or not, not an XmlHttpRequest instance.
    PhiLho : Why avoid the try/catches? They seems necessary anyway. And my code returns a kind of boolean: the return value is either null or not...
    tjrobinson : If they're necessary then that's fine, I just wondered if they had a performance impact and if it was possible to remove them. I've based my answer on your code so +1
  • I've come up with this:

    var xhr = null;
    try { xhr = new XMLHttpRequest(); } catch (e) {}
    try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
    try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
    return (xhr!=null);
    

    It seems to work so thought I'd share it.

0 comments:

Post a Comment