XQuery First Impressions and Code Snippet
Mon, 22 Apr 2013, by Syrsly
I am enrolled in the EM228 "Scripting for the Web" course at Colorado Tech University. I went into the course with previous JavaScript experience, but many students are probably still scratching their heads about the assignment which tells us to use XQuery to read from XML files and display the data on a web page. The tricky part is XQuery is not exactly the technology we are using. XQuery is a collection of conceptual coding methods which can be implemented in many languages to read and parse XML. In the class setting, we are using JavaScript. The instructor's code works but seems to be taken from this page, which is not enough information to do anything advanced with. It does not give us any information about how to retrieve specific data. I finished my assignment only because I already have previous experience messing with XML files in ActionScript, which is surprisingly similar to how JS DOM works.Anyway, if you are in such a situation, trying to figure out how XQuery in JS works, here is a little snippet of my code:
function loadXMLPage(xmlsrcfile) {
xml=loadXMLDoc(xmlsrcfile);
document.write("<h3>"+xml.documentElement.getAttribute("name")+"</h3><hr />");
path="/collection/item";
xobj=xml.documentElement.childNodes;
var evenodd = 0;
if (window.ActiveXObject) {
// code for IE
var nodes=xml.selectNodes(path);
for (i=0;i<nodes.length;i++) {
if (evenodd==0) {
document.write("<div class=\"item-wrapper item-odd\">");
evenodd=1;
} else {
document.write("<div class=\"item-wrapper item-even\">");
evenodd=0;
}
document.write("<div class=\"item\">");
document.write("<div class=\"item-img\"><img src=\"images/"+nodes[i].getElementsByTagName("image")[0].getAttribute("src")+"\" /></div>");
document.write("<div class=\"title\">"+nodes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</div>");
document.write("<div class=\"pricetag\">Only <span class=\"price\">"+nodes[i].getElementsByTagName("price")[0].childNodes[0].nodeValue+"</span></div>");
document.write("</div></div>");
}
} else if (document.implementation && document.implementation.createDocument) {
// code for non-IE browsers
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();
while (result) {
//document.write(result.nodeName); // Was useful for debugging.
if (evenodd==0) {
document.write("<div class=\"item-wrapper item-odd\">");
evenodd=1;
} else {
document.write("<div class=\"item-wrapper item-even\">");
evenodd=0;
}
document.write("<div class=\"item\">");
document.write("<div class=\"item-img\"><img src=\"images/"+result.getElementsByTagName("image")[0].getAttribute("src")+"\" /></div>");
document.write("<div class=\"title\">"+result.getElementsByTagName("title")[0].childNodes[0].nodeValue+"</div>");
document.write("<div class=\"pricetag\">Only <span class=\"price\">"+result.getElementsByTagName("price")[0].childNodes[0].nodeValue+"</span></div>");
document.write("</div></div>");
result=nodes.iterateNext();
}
}
}In the web page, you could call the above code by saving it in a JS file and using this snippet:
<script src="xmllib.js"></script>
<script>
loadXMLPage("movies.xml");
</script>First and foremost, this is JavaScript code, not XQuery. The only way it qualifies as XQuery is it uses the path functions, selectNodes and evaluate, which follow the XPath standard. The rest of the code is DOM scripting. Okay, I think getElementsByTagName function also qualifies as standard XQuery code, but I am honestly unsure about that. All I know is that was a function available to me in all the browsers I designed for. One setback, however, was that Firefox was the only browser that would allow me to run the xhttp.open function on a local page. All other browsers require that I run the script on a page that is on a web server.
This post not yet tagged.