How to Load XML File Contents using Javascript?

Question

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.

This can be combersome to do with plain-old JavaScript, are you using any frameworks? (before someone says "use jQuery"...) — roryf
– roryf, Commented May 8, 2009 at 14:35

Craig Otis · Accepted Answer · 2009-05-08 14:44:57Z

5

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;
}

answered May 8, 2009 at 14:44

Craig Otis

32.4k33 gold badges148 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bryan Kyle Over a year ago

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.

Craig Otis Over a year ago

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.

alibttb Over a year ago

I get CORS exception when I do this

Eineki · Accepted Answer · 2009-05-08 14:47:52Z

2

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

answered May 8, 2009 at 14:47

Eineki

14.9k6 gold badges55 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to Load XML File Contents using Javascript?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related