views:

1089

answers:

2

I'm looking for a way to load an XML file's contents directly into a Javascript variable. Say I have the following directory structure:

/index.html
/loader.js
/file.xml

In index.html, there is a <body> tag, whose contents should be replaced with the contents of the XML file. So if the XML file contains:

<element>
    <item>Item One</item>
    <item>Item Two</item>
</element>

Then after the dynamic load, the HTML would be:

...
<body>
<element>
...
</element>
</body>
...

My question is, what function can I use in loader.js to load the contents straight into a variable? I have used XmlHttpRequests and the ActiveX XMLDOM parser, but all just give me a structural data model that I then have to sort through to find my elements. I don't need to parse anything, I just want to obtain all the file contents.

Note: HTML/Javascript only, no server-side code.

A: 

I think I may have figured it out. The following seems to work pretty well:

function loadFileToElement(filename, elementId)
{
    var xmlHTTP = new XMLHttpRequest();
    try
    {
    xmlHTTP.open("GET", filename, false);
    xmlHTTP.send(null);
    }
    catch (e) {
        window.alert("Unable to load the requested file.");
        return;
    }

    document.getElementById(elementId).innerHTML=xmlHTTP.responseText;
}
craig
You might want to consider running this asynchronously. Synchronous AJAX requests can lock up the browser's UI giving users in impression that their browser is hung.
Bryan Kyle
This will be run from the client-side though, not on a server, so we're not too worried about the performance. Picture double-clicking an HTML file on your desktop.
craig
+1  A: 

Maybe you can read the responseText property of XmlHttpRequests to have the plain text before the parsing?

Eineki