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!
That's a lot of baggage to deal with. I investigated some alternatives.
- 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.
- 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.