Mention client-side XML to a group of Web developers and the majority of them
will think of Microsoft Internet Explorer and either MSXML2 or MSXML3. But when
it comes to client-side XML support there is an alternate to MSXML, namely Gecko.
Just because nobody is in your face touting the XML support features of Mozilla
and Netscape doesn’t mean that the support doesn’t exist. In fact,
Gecko supports XML, XSLT, XPath, XMLHTTP, SVG (Scalable Vector Graphics) and
MathML. The only real lack in Gecko’s XML support is how few people know
about it, but I intend to remedy that with my big mouth.
JavaScript and XML
Because Gecko doesn’t rely on non-standard extensions, like XML
data islands, the only way to invoke Gecko’s XML magic is through
the use of JavaScript (ECMAScript). One of the advantages of this use of JavaScript
is that if there is a problem with getting one method to work there is usually
another way to get the job done. An example of this is the relatively simple
task of loading the XML document in the first place. Just while playing with
Mozilla, I’ve found three ways to load an XML document without trying
real hard.
Loading the XML document
The first way is the brute force method of building the document using the XML
DOM to programmatically create the XML document’s node. The problem with
this method, shown below, is that it isn’t very flexible.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<script language='JavaScript'>
<!-- <![CDATA[
function setEvents() {
var objXML = document.implementation.createDocument('','doc',null);
var objRoot = objXML.createElement('root');
var objNode;
for(var i=0;i < 10;i++) {
objNode = objXML.createElement('row');
objNode.nodeValue = String(i);
objRoot.appendChild(objNode);
}
objXML = objRoot;
document.getElementById('example').innerHTML = 'XML document loaded.';
}
// ]]> -->
</script>
</head>
<body onload='setEvents()'>
<div id='example'></div>
</body>
</html>
Each and every time there is a change to the document the JavaScript needs to be changed. While this can lead to job security, after a couple of years, who would want the job?
The second way to load an XML document is a lot more familiar, simply by using the XML DOM·s load method. This is a lot like the method that is used with Microsoft·s MSXML, but there are several differences.
Discuss this in the Builder Forums
Do you have a related question or comment? You can access our XML forum from here and post your questions, reply to other users, search for answers and more.
The first of these differences is the fact that Gecko doesn·t support either Microsoft·s async extension or readystate extension to the XML DOM. So, instead of JavaScript sitting around ·twiddling its thumbs· waiting for the document to load or checking the readystate, Gecko uses an onload event handler. The onload event handler fires once the document is loaded and processing can proceed, the listing below shows:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<script language='JavaScript'>
<!-- <![CDATA[
function setEvents() {
var objXML = document.implementation.createDocument('','doc',null);
objXML.load('example.xml');
objXML.onload = xmlLoad;
}
function xmlLoad() {
document.getElementById('example').innerHTML = 'XML document loaded.';
}
// ]]> -->
</script>
</head>
<body onload='setEvents()'>
<div id='example'></div>
</body>
</html>
The final way to load an XML document is for those, like myself, who want JavaScript to twiddle its thumbs waiting for an XML document to load. Instead of using the load method, XMLHTTP is used to load the document as shown below. The result of this is a pretty good simulation of Microsoft·s async property.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language='JavaScript'>
<!-- <![CDATA[
function setEvents() {
var objXML = document.implementation.createDocument('','doc',null);
var objXMLHTTP = new XMLHttpRequest();
objXMLHTTP.open("GET", "example.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;
document.getElementById('example').innerHTML = 'XML document loaded.';
}
// ]]> -->
</script>
</head>
<body onload='setEvents()'>
<div id='example'></div>
</body>
</html>
What's next?
Now that the XML document is loaded, regardless of the method used, the question is what to do with it. Because Gecko supports XSLT, one idea is to create XHTML on the fly, which would drastically increase the dynamic part of DHTML. Another possibility is to use SOAP to access Web services on your server. Basically the only limitation on what to do next is your imagination.
Do you need help with XML? 
Leave a comment