In this document we will go through some common uses of the XML objects provided by IE and Mozilla.
To use the XML extras one has to include the needed JS file.
<script type="text/javascript" src="xmlextras.js"></script>
Notice that this JS file uses try/catch statements and therefore it will give syntax errors in old browsers that does not support these.
To load an XML file one can use both the XmlHttp object and the
XmlDocument object but I usually prefer the first one because it is a bit more
powerful.
function loadAsync(sUri) {
var xmlHttp = XmlHttp.create();
var async = true;
xmlHttp.open("GET", sUri, async);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
}
xmlHttp.send(null);
}
The open method takes three arguments and the first one is either
"GET" or "POST". The last argument allows you to load the
document synchronously or asynchronously. Synchronous loading is easier to use
because the call to send does not return until the XML file has loaded.
The downside to this is that the browser does not respond during this time. The argument
to send is needed and in case one is using "POST" this
should be of type XmlDocument.
In case you want to use synchronous loading set the third argument of open
to false. Once the send method has been called we can access the
responseXML property.
function loadSync(sUri) {
var xmlHttp = XmlHttp.create();
var async = false;
xmlHttp.open("GET", sUri, async);
xmlHttp.send(null);
doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
}
To post an XML document to the server we once again use the XmlHttp object.
To do this one only needs to pass the XmlDocument as the argument to the
send method.
function postAsync(sUri, xmlDoc) {
var xmlHttp = XmlHttp.create();
var async = true;
xmlHttp.open("GET", sUri, async);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
}
xmlHttp.send(xmlDoc);
}
The XmlHttp object also allows you to read non XML files. This is
done in almost exactly the same way as one reads XML files but instead of looking
at the responseXML property one looks at responseText.
function loadTextSync(sUri) {
var xmlHttp = XmlHttp.create();
var async = false;
xmlHttp.open("GET", sUri, async);
xmlHttp.send(null);
doSomething(xmlHttp.responseText); // responseText : String
}
The XmlDocument can be used in almost exactly the same was as one
uses the normal document object in DHTML. As long as one uses standard DOM
methods and properties no problems should arise. Below is a simple example that
creates a document, parses a string and then finds all test elements and
alerts their name.
var doc = XmlDocument.create();
doc.loadXML( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
"<root>" +
"<test name=\"Test 1\"/>" +
"<test name=\"Test 2\"/>" +
"</root>");
var testEls = doc.getElementsByTagName("test");
for (var i = 0; i < testEls.length; i++)
alert(tests[i].getAttribute("name"));
One can also load an xml file from the server using an XmlDocument
object. This is done using the load method. To make the loading asychronous
one sets the property async to true of the
XmlDocument object. When using asynchronous loading wait until the
readyState is 4.
function loadAsync2(sUri) {
var doc = XmlDocument.create();
doc.async = true;
doc.onreadystatechange = function () {
if (doc.readyState == 4)
alert(doc.xml); // doc.xml : String
}
doc.load(sUri);
}
The demo page allows you to load a few different xml files as well as enter some text and load non xml files. When outputting an XMl tree the xml document is traversed and some color coded html is generated.