There are three methods I know of that can be used by Javascript to load an XML document for parsing and display in the HTML by Javascript. They are given below, along with a table that shows the results each of these methods will have when loading an XML document by Javascript using the various browsers available for Windows platforms. By a local HTML or local XML file, I mean one which resides on the user's own computer, and by a remote HTML or remote XML file I mean one which resides on the Web and is accessed using the http:// prefix. In cases where both files are remote, they must both be in the same domain (e.g., www.somedomain.com) for the loading of the XML document to succeed. Otherwise, it will fail with an "access is denied" error message. In cases where both files are local, I've tested only cases in which both files are in the same directory and the XML file is accessed simply using its filename (e.g., "test.xml").
ActiveX: xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; while(xmlDoc.readyState != 4) {}; xmlDoc.load(xmlfile); readXML(); createDocument: xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.onload = readXML; xmlDoc.load(xmlfile); XMLHttpRequest: var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", xmlfile, false); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); xmlhttp.send(""); xmlDoc = xmlhttp.responseXML; readXML();| Loaded by Browser⇓ Using⇒ | ActiveX | createDocument | XMLHttpRequest | ||
|---|---|---|---|---|---|
| Works | Fails | Fails | ||
| Chrome | Fails | Fails | Works | ||
| Safari | Fails | Fails | Works | ||
| Firefox | Fails | Works | Works | ||
| Opera | Fails | Works | Works | ||
| Works | Fails | Works | ||
| Chrome | Fails | Fails | Fails | ||
| Safari | Fails | Fails | Works | ||
| Firefox | Fails | Fails | Fails | ||
| Opera | Fails | Fails | Fails | ||
| Works | Fails | Works | ||
| Chrome | Fails | Fails | Works | ||
| Safari | Fails | Fails | Works | ||
| Firefox | Fails | Works | Works | ||
| Opera | Fails | Works | Works |
Using this information, I've come up with the following Javascript code that will load an XML file in just about any situation, if there's a way for that to happen using a given browser. It must be noted that some situations just won't work. For example, if you're doing development using Chrome, Firefox, or Opera, and you have a local HTML file that uses Javascript to load an XML file that resides someplace on the Web, you are trying to do something that just won't work, apparently because of the security precautions built into those browsers. To get the operation of loading a remote XML file with Javascript in a local HTML file to work you'll have to use IE (which will succeed using either the "ActiveX" or "XMLHttpRequest" methods above) or Safari (which will succeed using the "XMLHttpRequest" method above).
This code assumes that readXML is the name of a Javascript function that uses the global variable xmlDoc to access the DOM tree, and that initLibrary() is called with the onload handler from the HTML body tag like this:
<body οnlοad="initLibrary()"> The file name passed into the importXML function can of course be changed to any local or remote XML file name, depending on which one you want to load.var xmlDoc; var xmlloaded = false; function initLibrary() { importXML("http:///www.somedomain.com/somesubdir/somefile.xml"); } function importXML(xmlfile) { try { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", xmlfile, false); } catch (Exception) { var ie = (typeof window.ActiveXObject != 'undefined'); if (ie) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; while(xmlDoc.readyState != 4) {}; xmlDoc.load(xmlfile); readXML(); xmlloaded = true; } else { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.onload = readXML; xmlDoc.load(xmlfile); xmlloaded = true; } } if (!xmlloaded) { xmlhttp.setRequestHeader('Content-Type', 'text/xml') xmlhttp.send(""); xmlDoc = xmlhttp.responseXML; readXML(); xmlloaded = true; } }