dean.edwards.name/weblog/2006/04/easy-xml/

How To Load And Parse XML Data Without ActiveX

A little known but cool feature of Internet Explorer is its support for XML data islands. Basically, you can embed some XML data in a page like this:

<html>
 <head>
  <xml>
   <root>Some data</root>
  </xml>
 </head>

Even cooler, you can reference an external data source:

<xml src="data.xml"></xml>

The classic “Ajax” way to load XML data involves a couple of ActiveX objects:

var http = new ActiveXObject("Microsoft.XMLHTTP");
http.open("GET", "data.xml", false);
http.send(null);
var xmlDocument = http.responseXML;

responseXML is a tricky beast, on most platforms it refers to an XML document. This means you can do things like access the root node through the documentElement property. Unfortunately this does not work on Internet Explorer:

alert(xmlDocument.documentElement);
// ==> [object Element] for Mozilla
// ==> null             for Internet Explorer 

To create a true XML document for Internet Explorer you must use the responseText property and another ActiveX object to parse it:

var xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
xmlDocument.loadXML(http.responseText);

An easier way to achieve the same result without ActiveX is this:

var xml = document.createElement("xml");
xml.src = "data.xml";
document.body.appendChild(xml);
var xmlDocument = xml.XMLDocument;
document.body.removeChild(xml);

The code above will load and parse an external XML file. The resulting object is a true XML document which can be treated the same as the responseXML returned by the XMLHttpRequest object on other platforms.

The above code will only work on a local file system. When dealing with remote data you check the readyState property to ensure that the data has been fully loaded. You can also trap the onreadystatechange event as you would for the XMLHttpRequest object.

Comments (40)

Leave a comment

Wow, that’s really great.

I guess it’d only be useful for XML data though, which is rarely how I use XMLHttpRequest. And it wouldn’t support POST parameters. And you’d still need to do things the XMLHttpRequest style for non-IE browsers.

Still, if you’re doing something that fits, this looks like a much better way than using ActiveX.

@Jesse:

You are absolutely right about what XML-Islands don’t do for you. They also dont provide you with a simple way of passing data to the Server (well, you could encode the Data in the URL).

You can get what you want by using a hidden iframe, document.write() a form with a textarea holding your data and set the method to “POST”. Then you sumbit that form and use onreadystatechange on the iframe. You can get the XML-Document as the iframes document then.

The server of course must check for the POST-parameter.

The bad news is that the above is harder to do than to talk about – there are many cases where you need setTimeout() to decouple things from each other. The XML-islands are a simple way if what they deliver to you is enough for your problem.

“This means you can do things like access the root node through the documentElement property.”

You say this doesn’t work in explorer. I just tested it with my code and yours and I get the root element for xmldoc.documentElement. xmldoc points to the xml document in both IE and Mozilla.

Admitedly I havn’t tested this in any but the newest version of IE6. Has this behaviour changed recently?

You can also pull local data with XMLHTTP (in IE anyway)

  • Comment by: Mark Kahn
  • Posted:

documentElement works for responseXML !!! If the document returned by XMLHTTP is an xml document (mime-type = text/xml) then request.responseXML.documentElement works as expected. In IE, if the mime-type is not text/xml and/or the document is not a valid XML document, then responseXML is not valid, and you can use responseText to access the plain text returned by the server.

  • Comment by: Vincenzo
  • Posted:

@Mark – you’re right! I’m pretty sure that when I tested this I was getting null for xmlDocument.documentElement. I should be more thorough in my testing.:-)

The point of this post though, is that you can use XML data islands to load and parse XML data without using ActiveX objects.

  • Comment by: -dean
  • Posted:

The main problem with Data Islands (as has been pointed out) that I have is that they’re only viable for IE.

If you have a use for them that you can be sure only needs to work in IE, they’re great.

Short of that, I personally see only one use for them: as a failover for XMLHTTP. My current library does just that, but they’re not as flexible as XMLHTTP so unless you’re sending a GET and expecting text/xml as a response, it won’t work.

  • Comment by: Mark Kahn
  • Posted:

I remember fiddling about with data islands a couple of years back, but at the time didn’t have any use for them. Thanks for the reminder.

  • Comment by: Tony Bittan
  • Posted:

[…] uo; Writing CSS Shorthand Load And Parse XML Data Without ActiveX Load And Parse XML Data Without ActiveX – hardcore stuff. This entry […]

@Mark

Shure XML islands only work for IE, but you have to distinguish between IE and real browsers as well if you use XMLHttpRequest. You can do that by simply testing if window.XMLHttpRequest exists. You can even use a try{}-block around the instantiation of the ActiveX-component and only fall back to XML islands in the catch-block (the user may have deactivated ActiveX). If you realy whant a 100% solution you can chose to use a hidden iframe or XML Islands depending on the usecase.

The XML island is easier to handle than the hidden iframe an I guess it is also a bit faster. The drawback is that you can only use it for GET-requests and you are very limitet in the ammount of data transfered to the server in a single request.

This is really great idea! A little googling showed that you can also call transformNode on the data island. I’ll have to test transformations later today when I have more time. XML *and* XSLT without ActiveX would be pretty cool!

  • Comment by: Fuzztrek
  • Posted:

IceWeb 2006 notes – Shaun Inman, “Responsible Asynchronous Scripting” First of all, to Simmi and any others who might be in the room as I type this: Hi!:-)* Briefly explains the difference between the asynchronous model and the plain HTTP model. * In the really early days…

Downside of using that method is, the ‘encoding’ parameter in the XML prolog will be ignored, and IE will default to Latin-1.

So people’ll have to specify their encoding using the HTTP headers to fix that.

wrt. documentElement, I think it doesn’t work in IE5 or IE5.5.

~Grauw

I mean the xmlDocument.loadXML(http.repsonseText); method, haven’t tried the data island thing.

Great post once again, btw!:)

~Grauw

Just to add a bit to the conversation here… While true XML data islands are only available in IE, you can gain similar capabilities by creating a container within your document, set the CSS display property to none, and then use this container as a simple cache for storing and retrieving XML fragments.

A hack, yes… And even more so can lead to various issues that come along for the innerHTML ride, especially when you attempt to transform this via XSLT only to discover that what you have is nothing remotely even close to well formed text, much less XML. But at this stage of the web’s future history it’s tough to determine the difference between intentional feature and unintentional side effect (and therefore destined to cause a bit of trouble along the way) anyway.

None-the-less, results may vary, but if used with care, can make browser-based XML handling just a touch nicer, of which XML data islands in IE, without a doubt, most definitely do.:)

Doesn’t work for me…

I get the error “xmlDocument has no properties” in Firefox and in IE 6 it says xmlDocument is an [Object] but xmlDocument.documentElement is null.

  • Comment by: tony
  • Posted:

@tony – did you even read my post?

  • Comment by: -dean
  • Posted:

I landed on http://dean.edwards.name/weblog/2006/04/easy-xml/ through google. Can you have something to parse RSS feeds and gets its elements. This will be useful for many, as now a days RSS feeds are every where!

  • Comment by: Yogesh
  • Posted:

Yogesh, I wrote a Javascript (Ajax) RSS reader for the Ajax Hacks book. The demo for it’s here.

And as Vincenzo mentioned back in remark #4 above, responseXML does work in IE if the response has a text/xml mime-type.

  • Comment by: Mark P.
  • Posted:

There is a syntax error in the sample code:

var xmlDocument = new ActiveXObject
(“Microsoft.XMLDOM”);xmlDocument.loadXML(http.(!!!)repsonseText(!!!));

It must read ‘response’ instead of ‘repsonse’.

  • Comment by: Georgi Kostov
  • Posted:

I wrote a small script a while ago that transforms XML using XSLT (just as Fuzztrek wanted) without any ActiveX controls. It’s available from http ://johannburkard.de/grabbag/xslt.js (in my grab bag).

Some companies have configured IE not to instantiate any ActiveX controls, that’s why I think this is pretty useful.

  • Comment by: Johann
  • Posted:

During creation of web application using AJAX I am facing the following problem.

In case of IE6 it work correctly. But in case of mozilla it does not work properly, i.e. in some case it return correct “responseXML” but in some case it return null “responseXML” for same type of code the code fragment is as follows.

try
{
       try
            {
                pc_MODE_OF_PAYMENTObj=new ActiveXObject("MSxml2.XMLHTTP");
            }
            catch(e)
            {
                try
                {
                    pc_MODE_OF_PAYMENTObj=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(E)
                {
                    pc_MODE_OF_PAYMENTObj=new XMLHttpRequest();
                }
            }
            pc_MODE_OF_PAYMENTObj.onreadystatechange = function(){
                if(pc_MODE_OF_PAYMENTObj.readyState==4)
                {
                    alert("ready pc_MODE_OF_PAYMENTObj");
                    message=pc_MODE_OF_PAYMENTObj.responseXML;
                    alert(pc_MODE_OF_PAYMENTObj.responseXML);
                    alert(pc_MODE_OF_PAYMENTObj.responseText);

} }; pc_MODE_OF_PAYMENTObj.open('GET','../../../../../geni/resources/ajaxjsp/premiumcollection/pc_CMBTXT_MODE_OF_PAYMENT_ALL.jsp,true); pc_MODE_OF_PAYMENTObj.send(''); } catch(e) { alert("Exception :"+e); }

  • Comment by: Prasenjit Nayak
  • Posted:

Does this data island mechanism bypass the XMLHTTPRequest security issue? That is, XMLHTTPRequest won’t let you fetch XML data from a server that is different than the one the original page was loaded from.

But you *can* load script from anyplace.

I am wondering if this data island machinery also bypasses that security feature in XMLHTTPRequest…

  • Comment by: HenryMinsky
  • Posted:

To answer my question: no, it doesn’t bypass the security model. I get a dialog warning when I try to load from an external site.

  • Comment by: HenryMinsky
  • Posted:

[…] In this post from Dean Edwards, he quickly shows off a feature of Internet Explorer that could replace the use of ActiveX for XML communication – XML data islands. A little known but cool feature of Internet Explorer is it’s support for XML data islands. Basically, you can embed some XML data in a page and reference an external data source. […]

You guys are missing a couple of important points about XML Data Island support in IE: – not only is it proprietary, but it has also been deprecated; – it invokes the MSXML3 Dom engine internally (which can cause you problems if you’re also working with documents created using the newer version.)

  • Comment by: rick
  • Posted:

@rick – you have to use proprietary methods in IE anyway. You’ve spectacularly missed the point.

  • Comment by: -dean
  • Posted:

Does anyone have an xml parser that will allow me to organize the elements of the data feed in a spreadsheet format while deleting nulls in the feed?

  • Comment by: Mack
  • Posted:

For those interested in following up on data islands .. they are kind of supported in Mozilla : see here basically you can dump an <xml> element containing xml on your page and it wont display and you can access it using DOM methods. This could be useful for client side caching.

  • Comment by: Dave
  • Posted:

You’re a livesaver.

  • Comment by: Matt
  • Posted:

Thank you Vincenzo (post #4), all I had to do is output a header: text/xml before the xml data in my php script and everything started working!

  • Comment by: Ed
  • Posted:

I’ve only just got started with AJAX. Figured it was high time I learned it, so I decided to put a slideshow of sorts on my home page. After much headscratching, I ran across IE’s problem with the responseText property and after a bit of Googling I was led here. Thank you very much indeed for showing me how to get through that particular problem as it was driving me nuts. Keep up the good work!

  • Comment by: Phil Smith
  • Posted:

saved my day. real tricky way, after days of sweeping forums and blogs with no avail, this solution suddenly broke the curse on ie6 at 3.5 am. thanx a lot!

  • Comment by: yakup
  • Posted:

“When dealing with remote data you check the readyState property to ensure that the data has been fully loaded. You can also trap the onreadystatechange event as you would for the XMLHttpRequest object.”

How do you do this? I don’t think that property and event are available for anything except the XMLHttpRequest object.

But the code :

var xml = document.createElement(“xml”);xml.src = “data.xml”;document.body.appendChild(xml);var xmlDocument = xml.XMLDocument;document.body.removeChild(xml);

will not work on IE7 , I think this is bcoz the use of createElement() which i suppose IE7 does not support.

So is there ny altenative to this which will work in IE7..

please make a try..

  • Comment by: Soubhagya
  • Posted:

[…] How To Load And Parse XML Data Without ActiveX Apr 27, 06 A little known but cool feature of Internet Explorer is it’s support for XML data islands. Basically, you can embed some XML data in a page. […]

[…] Dean Edwards: How To Load And Parse XML Data Without ActiveX IE and responseXML (tags: reference javascript windows) […]

Didnt fucking work for me. shit code for solution. just doesnt work

  • Comment by: lawrence
  • Posted:

Thank you for this post! It helped a ton.

  • Comment by: DCunningham
  • Posted:

[…] Im trying to parse an xml string in IE based on the following example: http://dean.edwards.name/weblog/2006/04/easy-xml/ […]

This article is not true for Internet Explorer 8 and above (using MooTools)

  • Comment by: Marecky
  • Posted:

Comments are closed.