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.

image from book
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.

image from book
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?



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net