Modern Web Apps: Client-side XML Processing in IE5
It's the year 2000, and "DHTML" is the word on every web developer's lips. But the real revolution isn't just moving <div> tags around; it's the ability to fetch and manipulate raw data without a full page refresh. Microsoft has given us a powerful tool in IE5: the Microsoft.XMLDOM ActiveX object.
Loading XML Data
We no longer need to embed data in hidden form fields or complex JavaScript arrays generated by PHP or ASP. We can load an XML file directly from the server.
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("products.xml");
if (xmlDoc.parseError.errorCode != 0) {
alert("Error: " + xmlDoc.parseError.reason);
} else {
processData(xmlDoc);
}
Navigating the DOM
Once the XML is loaded, we use the standard Document Object Model methods to traverse it. getElementsByTagName and selectSingleNode (using XPath!) make it incredibly easy to find what we need.
function processData(xml) {
var items = xml.getElementsByTagName("item");
var output = "<ul>";
for (var i = 0; i < items.length; i++) {
var name = items[i].selectSingleNode("name").text;
var price = items[i].selectSingleNode("price").text;
output += "<li>" + name + ": $" + price + "</li>";
}
output += "</ul>";
document.all.itemContainer.innerHTML = output;
}
Why This Matters
By moving the rendering logic to the client, we reduce the load on our servers. The server only has to send small XML fragments instead of bloated HTML tables. Combine this with the XMLHTTPRequest object (also an ActiveX component in IE5), and you have the foundation for truly interactive applications that feel more like desktop software than static "pages."
Just remember to check your parseError object. Debugging XML in the browser is notoriously difficult without it.
Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.
Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development