Loading XML Documents

Our first step will be to load an XML document into Internet Explorer using code, and to create a document object. Using this object, we'll be able to access all aspects of the document itself.

As mentioned earlier in this chapter, there are two ways to load an XML document into Internet Explorer so that you have access to it using JavaScript. To see how this works, I'll use this XML document, ch07_01.xml, throughout this chapter. This document records business meetings, including who was present and when the meeting occurred:

Listing ch07_01.xml
 <?xml version="1.0"?> <MEETINGS>    <MEETING TYPE="informal">        <MEETING_TITLE>XML In The Real World</MEETING_TITLE>        <MEETING_NUMBER>2079</MEETING_NUMBER>        <SUBJECT>XML</SUBJECT>        <DATE>6/1/2003</DATE>        <PEOPLE>            <PERSON ATTENDANCE="present">                <FIRST_NAME>Edward</FIRST_NAME>                <LAST_NAME>Samson</LAST_NAME>            </PERSON>            <PERSON ATTENDANCE="absent">                <FIRST_NAME>Ernestine</FIRST_NAME>                <LAST_NAME>Johnson</LAST_NAME>            </PERSON>            <PERSON ATTENDANCE="present">                <FIRST_NAME>Betty</FIRST_NAME>                <LAST_NAME>Richardson</LAST_NAME>            </PERSON>        </PEOPLE>    </MEETING> </MEETINGS> 

The first way of loading an XML document into Internet Explorer is to create a document object using the Microsoft.XMLDOM class. (Bear in mind that you can also specify the version of MSXML you want, for example, as MSXML2.DOMDocument.4.0 .)

To see this in action, I'm going to create an example that reads in ch07_01.xml and retrieves the name of the third person in that document (Betty Richardson). I start by creating a new document object like this (recall that you use the new operator to create a new object): xmldoc = new ActiveXObject("Microsoft.XMLDOM") . Here's how it looks in code, in which I'm loading in the XML document ch07_01.xml:

 <HTML>      <HEAD>          <TITLE>              Reading XML element values          </TITLE>          <SCRIPT LANGUAGE="JavaScript">               function readXMLDocument()               {  var xmldoc   xmldoc = new ActiveXObject("Microsoft.XMLDOM")   xmldoc.load("ch07_01.xml")  .                   .                   .     </HEAD> </HTML> 

The next step is to get a node object corresponding to the document's root element, <MEETINGS> , and you do that with the documentElement method:

 var xmldoc, meetingsNode                    xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")  meetingsNode = xmldoc.documentElement  .                   .                   . 

At this point, I'm free to move around the document as I like, using methods such as firstChild , nextChild , previousChild , and lastChild , which let you access the child elements of an element, and the firstSibling , nextSibling , previousSibling , and lastSibling methods, which let you access elements on the same nesting level. For example, the <MEETING> element is the first child of the document root element, <MEETINGS> , so I can get a node corresponding to the <MEETING> element using the firstChild method:

 var xmldoc, meetingsNode, meetingNode,                    xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")                   meetingsNode = xmldoc.documentElement  meetingNode = meetingsNode.firstChild  .                   .                   . 

I want to track down the third <PERSON> element inside the <PEOPLE> element. The <PEOPLE> element is the last child of the <MEETING> element, so I can get a node corresponding to the <PEOPLE> element this way:

 var xmldoc, meetingsNode, meetingNode, peopleNode                    var first_nameNode, last_nameNode                   xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")                   meetingsNode = xmldoc.documentElement                   meetingNode = meetingsNode.firstChild  peopleNode = meetingNode.lastChild  .                   .                   . 

I want the third person in the <PEOPLE> element, which is the last child of this element, so I get access to that person with the lastChild method:

 var xmldoc, meetingsNode, meetingNode, peopleNode                    xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")                   meetingsNode = xmldoc.documentElement                   meetingNode = meetingsNode.firstChild                   peopleNode = meetingNode.lastChild  personNode = peopleNode.lastChild  .                   .                   . 

Finally, I can get a node corresponding to the <FIRST_NAME> and <LAST_NAME> elements that hold the person's name using the firstChild and nextSibling (which gets the current node's next sibling node) methods:

 var xmldoc, meetingsNode, meetingNode, peopleNode                    var first_nameNode, last_nameNode                   xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")                   meetingsNode = xmldoc.documentElement                   meetingNode = meetingsNode.firstChild                   peopleNode = meetingNode.lastChild                   personNode = peopleNode.lastChild  first_nameNode = personNode.firstChild   last_nameNode = first_nameNode.nextSibling  .                   .                   . 

Now I've walked the tree to get nodes corresponding to the actual elements I want. Note, however, that the node I want is actually the text node inside the <FIRST_NAME> and <LAST_NAME> elements, which holds the person's name. That means that I have to get the first child of those elements (that is, the text node) and then use the nodeValue property of that text node to read the person's name.

To actually display the person's first and last names , I'll use a little dynamic HTML. Here, I'm going to use an HTML <DIV> element and the innerHTML property of that element (which holds the text content of the <DIV> element) to display the person's name like this:

Listing ch07_02.html
 <HTML>     <HEAD>          <TITLE>              Reading XML element values          </TITLE>          <SCRIPT LANGUAGE="JavaScript">               function readXMLDocument()               {                   var xmldoc, meetingsNode, meetingNode, peopleNode                   var first_nameNode, last_nameNode, outputText                   xmldoc = new ActiveXObject("Microsoft.XMLDOM")                   xmldoc.load("ch07_01.xml")                   meetingsNode = xmldoc.documentElement                   meetingNode = meetingsNode.firstChild                   peopleNode = meetingNode.lastChild                   personNode = peopleNode.lastChild                   first_nameNode = personNode.firstChild                   last_nameNode = first_nameNode.nextSibling  outputText = "Third name: " +   first_nameNode.firstChild.nodeValue + ' '   + last_nameNode.firstChild.nodeValue   messageDIV.innerHTML=outputText  }          </SCRIPT>     </HEAD>     <BODY>         <CENTER>             <H1>                 Reading XML element values             </H1>             <INPUT TYPE="BUTTON" VALUE="Get the name of the third person"                 ONCLICK="readXMLDocument()">             <P>             <DIV ID="messageDIV"></DIV>         </CENTER>     </BODY> </HTML> 

I've also added a button with the caption Get the name of the third person that will call the JavaScript function we've defined, readXMLDocument ; that function reads and displays the document.

You can see this page at work in Internet Explorer in Figure 7-1. When the user clicks the button, the XML document ch07_01.xml is read and parsed, and we retrieve and display the third person's name. We've made substantial progress.

Figure 7-1. Reading an XML element in Internet Explorer.

graphics/07fig01.gif



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

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