Handling XML with JavaScript
As discussed in Chapter 8, a browser sees an XML document as a tree of nodes, and that’s important to understand if you want to work with XML in Javascript. For example, take a look at this simple XML document:
<?xml version="1.0" ?> <document> <greeting> Welcome to XML </greeting> <info> This is an XML document. </info> </document>
In this case, the <document> node has two child nodes, the <greeting> and <info> nodes. These nodes are child nodes of the <document> node, and sibling nodes of each other. Both the <greeting> and <info> elements themselves have one child node: a text node that holds character data. In terms of a tree of nodes, this is what this document looks like:
<document> | ---------------------------------- | | <greeting> <info> | | Welcome to XML This is an XML document.
JavaScript has built-in properties you can use to work with the nodes in XML documents like the one that’s returned in the XMLHTTPRequest object’s responseXML property. JavaScript’s built-in properties are listed in Chapter 8, but to refresh your memory, they are
-
attributes: Attributes by this node
-
childNodes: Array of child nodes
-
documentElement: The document element
-
firstChild: First child node
-
lastChild: Last child node
-
localName: Local name of the node (without namespaces)
-
name: Name of the node
-
nextSibling: Next sibling node
-
nodeName: Name of the node
-
nodeType: Node type
-
nodeValue: Value of the node
-
previousSibling: Previous sibling node
You’ll see how to use these properties in JavaScript later in this chapter. Note in particular that the nodeType property holds the type of a node, which can be any of the following:
-
1 Element
-
2 Attribute
-
3 Text node
-
4 CDATA (XML character data) section
-
5 XML entity reference
-
6 XML entity node
-
7 XML processing instruction
-
8 XML comment
-
9 XML document node
-
10 XML Document Type Definition (DTD)
-
11 XML document fragment
-
12 XML Notation
It’s time to start working with some code. Say, for example, that you wanted to start by loading an XML document into a JavaScript object, creating an object corresponding to the document element of the XML document. All the data in the XML document is accessible from the document element, because the document element contains all the data in the document (you can use the firstChild, childNodes, lastChild, and other properties on the document element to access the data in the document).
So how do you load an XML document into JavaScript and get an object for the document element? Take a look at documentElement.html, which appears in Figure 9.1.
Figure 9.1: The documentElement.html application
This application reads in event.xml and creates an object corresponding to event.xml’s document element when you click the button, as shown in Figure 9.2.
Figure 9.2: The documentElement.html application at work
This application gives you your formal start in handling XML with Ajax. Start by creating the button you see in Figure 9.1, and the <div> element in which to display the results:
<body> <h1>Getting the Document Element</h1> <form> <input type = "button" value = "Get the document element" onclick = "getDocumentElement()"> </form> <div width =100 height=100> The result will appear here. </div> </body>
The button is tied to a JavaScript function named getDocumentElement, which starts by creating an XMLHttpRequest object:
function getDocumentElement() { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } . . . } If the XMLHttpRequest object was created, you can download event.xml and get its XML from the XMLHttpRequest object’s responseXML property as an XML document object:
function getDocumentElement() { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "event.xml", true); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; . . . } } } } To get the document element object, use the document object’s documentElement property:
function getDocumentElement() { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "event.xml", true); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; var documentElement = xmlDocument.documentElement; . . . } } } } If the document element object was created, you can notify the user of that fact:
function getDocumentElement() { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "event.xml", true); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; var documentElement = xmlDocument.documentElement; if(documentElement){ document.getElementById("targetDiv").innerHTML = "Got the document element."; } } } XMLHttpRequestObject.send(null); } } And that completes the example-you’ve grabbed the document element. Now how about actually doing something with that element?
