Data Islands

My company's resident JavaScript guru likes to use a technique called Data Islands. While I can roll some JS and have even been known to make asynchronous calls before there buzzwords to describe such a thing, I had never heard of this term until a few months ago.

The idea is simple. You have some server side technology that is serving up data as (drum roll please) XML. This XML is consumed by the client side. If you're doing a lot of AJAX after the initial page load, then you might already have client side assets for reading XML and rendering it in the browser. This technique leverages the same thing, only the XML comes over with the initial load of the page.

So how to embed XML? Well somebody at Microsoft apparently decided it would be great just to have an XML tag in the page and dump it all inside that tag. Hence the term data island.

Surely you see where this is going. The data island is a Microsoft thing and its corresponding implementation via the XML tag is only understood on IE. Still it seems like a technique with some merit, and there are ways to get it to work on Mozilla based browsers, too.

Mozilla will ignore the XML tag as just some unknown HTML tag. However, it will try to show the contents of the tag (and the child tags) so first thing for cross browser support is to give your island an invisible style (style="visibility:hidden".) Next you can slurp up the contents of the tag since it still part of the page DOM. You can pass the contents into a DOM parser, a voila!

A couple problems, though. Mozilla still thinks everything is HTML and "reads" it that way first. So if you have a tag that shares its name with an HTML (or JavaScript) tag/reserved word, you'll have issues. No label or title tags. In fact, even an image tag won't work because of it's use in JavaScript. Similarly, no self closing tags like . If you do it like it won't cause problems, but it will be ignored completely, like it wasn't even there.

That's a lot of baggage to deal with. I investigated some alternatives.

1. Load the island asynchronously. Chances that the reason you would use the data island technique is that you are also using AJAX for updates to your page, thus you wanted to re-use script written for that XML. In that case, you could just load the data island with a separate AJAX call after the page loads. Obviously the big drawback here is that you have to make a second call to your server to load the page.
2. Emebed your XML as a JavaScript string instead of an HTML tag. In this case Mozilla won't try to read it as HTML, so it won't give you all the weird things mentioned above. The big drawback is that this is not as efficient on IE, since you aren't making use of the special mechanism, and you have to make sure to make your XML string JavaScript string friendly.
3. If you're going to go the route in #2, then you might just consider going one step further. Don't use XML at all, and just make your data into a JSON string that is evaluated when your page loads. I didn't do any testing, but this would seem like it has to be pretty close to being as fast on IE as the data island, while still being cross browser. Maybe I'll put that hypothesis to the test. Obviously the big drawback is that you'll want all your client-server communication to use the same mechanism, so you don't have redundant code. Thus you'll probably want to use JSON for your AJAX calls.

I'm kind of partial to #3, which is probably the biggest mutation of the data island technique. I can hear a lot of people saying "well you shouldn't try to make use of an MS extension to HTML anyways..." Don't forget that XMLHttpRequest was once an IE-only extension from MS, but became a "standard" that is now the cornerstone of so many web applications. The data island technique is very complimentary to AJAX, so maybe it will see the same kind of adoption.