Larry Steinle

Today I encountered an interesting AJAX problem. I had code that worked perfectly in IE 7, 8 and 9, but not IE 10! So this post is for the die-hard JavaScript programmers out there who are scratching their heads wondering why their AJAX calls stopped working.

The code-block that was broken calls a web service using the returned XML Document to parse out the specific value needed. However, when I ran the code I received the following error message: 0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘selectNodes’.

As part of figuring out what went wrong I created a very simple JavaScript code block to test. This code block threw the following error message when the alert command fired: 0x800a138f – JavaScript runtime error: Unable to get property ‘xml’ of undefined or null reference.

var ajaxRequest = new XMLHttpRequest();

ajaxRequest.onreadystatechange = function () {
  if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
    //Throws null reference error because xml property doesn't exist!
    alert(ajaxRequest.responseXML.xml);
  };
};

ajaxRequest.open("GET", uriPath, true);
ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajaxRequest.send();

Becoming very suspicious I went to another machine and ran the same code and voila! It worked!

Now it began to make sense. The machine that worked was Windows 7 with IE 9. The machine that failed was Windows 8 with IE 10.

After some googling I found an article discussing the XmlHttpRequest in IE 10. In the article it was explained that IE 10 no longer returns the XML Document from the responseXML property anymore. Instead it returns a native XML document. That explained why the xml property in responseXML didn’t exist. The article explained that the XMLHttpRequest object could be told to return the XML Document instead of the native DOM document.

So I updated the code as follows and it worked perfectly!

var ajaxRequest = new XMLHttpRequest();

ajaxRequest.onreadystatechange = function () {
  if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
    //Throws null reference error because xml property doesn't exist!
    alert(ajaxRequest.responseXML.xml);
  };
};

ajaxRequest.open("GET", uriPath, true);
ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
try { ajaxRequest.responseType = "msxml-document"; } catch(e) { };
ajaxRequest.send();

For more details about the reason for the change refer to XMLHttpRequest responseXML in IE10 Release Preview.

If you are looking for a jQuery solution to this problem refer to the article, jQuery Support for IE 10 XMLHttpRequest.

Happy coding!