Retrieving Data from an XML Document


Take a look at event.html, which is shown in Figure 9.3.

image from book
Figure 9.3: The event.html application at work

This application reads in event.xml and retrieves the name of the third guest from the guest list in that XML document:

 <?xml version="1.0"?> <events>     <event type="fundraising">        <event_title>National Awards</event_title>        <event_number>3</event_number>        <subject>Pet Awards</subject>        <date>5/5/2007</date>        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            <person attendance="absent">                <first_name>Virginia</first_name>                <last_name>Mayo</last_name>            </person>            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>     </event> </events>

You can see how this works in Figure 9.4, in which the application displays the name of the third guest, Jimmy Stewart.

image from book
Figure 9.4: Accessing the third guest

How does this work in code? You start with the button, which is connected to a function named

getData here, and the <div> element in which to display the results:

 <body>   <h1>Retrieving XML data</h1>   <form>     <input type = "button" value = "Get the third guest"       onclick = "getData()" />   </form>   <div  width =100 height=100>     Who was the third guest?   </div> </body>

In the getData function, you download event.xml and pass the XML document object to a new function, displayThirdGuest, like this:

 function getData() {   .   .   .   if(XMLHttpRequestObject) {     XMLHttpRequestObject.open("GET", "event.xml", true);     XMLHttpRequestObject.onreadystatechange = function()     {       if (XMLHttpRequestObject.readyState == 4 &&         XMLHttpRequestObject.status == 200) {       var xmlDocument = XMLHttpRequestObject.responseXML;       displayThirdGuest(xmlDocument);       }     }     XMLHttpRequestObject.send(null);   }  }

In the displayThirdGuest function, you want to display the name of the third guest, Jimmy Stewart. Start by getting an object corresponding to the document element, <events>:

 <?xml version="1.0"?> <events>     <event type="fundraising">        <event_title>National Awards</event_title>        <event_number>3</event_number>        <subject>Pet Awards</subject>        <date>5/5/2007</date>        <people>         .         .         .            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>     </event> </events>

The displayThirdGuest function is passed an XML document object, so you can get an object corresponding to the <events> node like this:

 function displayThirdGuest (xmldoc) {   var eventsNode;   eventsNode = xmldoc.documentElement;   .   .   . }

Next, you want to get an object corresponding to the <event> element:

 <?xml version="1.0"?> <events>     <event type="fundraising">         .         .         .            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>     </event> </events>

To do that, use the document element’s firstChild property this way in the displayThirdGuest function:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   .   .   . }

To get an object corresponding to the <people> element, use the <event> element’s lastChild property:

 <?xml version="1.0"?> <events>     <event type="fundraising">        <event_title>National Awards</event_title>        <event_number>3</event_number>        <subject>Pet Awards</subject>        <date>5/5/2007</date>        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            <person attendance="absent">                <first_name>Virginia</first_name>                <last_name>Mayo</last_name>            </person>            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>    </event> </events>

Here’s what it looks like in code:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   .   .   . }

Next, get an object corresponding to the third person:

 <?xml version="1.0"?> <events>           .           .           .        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            <person attendance="absent">                <first_name>Virginia</first_name>                <last_name>Mayo</last_name>            </person>            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>    </event> </events>

To do that, use the <people> element object’s lastChild property:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   .   .   . }

Next, grab the third guest’s <first_name> element:

 <?xml version="1.0"?> <events>     <event type="fundraising">         .         .         .        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            <person attendance="absent">                    <first_name>Virginia</first_name>                    <last_name>Mayo</last_name>            </person>            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>     </event> </events>

To get the <first_name> element, use the <person> element node’s firstChild property:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   .   .   . }

And you also need the last name of the third guest:

 <?xml version="1.0"?> <events>     <event type="fundraising">         .         .         .        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            <person attendance="absent">                <first_name>Virginia</first_name>                <last_name>Mayo</last_name>            </person>            <person attendance="present">                <first_name>Jimmy</first_name>                <last_name>Stewart</last_name>            </person>        </people>     </event> </events>

Here’s what that looks like in code:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   lastNameNode = firstNameNode.nextSibling;   .   .   . }

Now that you have a node object corresponding to the <first_name> and <last_name> elements of the third guest, how do you retrieve the person’s actual name? The first and last names are embedded in the <first_name> and <last_name> elements:

 <person attendance="present">     <first_name>Jimmy</first_name>     <last_name>Stewart</last_name> </person>

In fact, the first and last names are text nodes inside the <first_name> and <last_name> element nodes, so you can start by assembling a text string that will display the name of the third guest:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   lastNameNode = firstNameNode.nextSibling;   displayText = "The third guest was " +   .   .   . }

To refer to the text node of the person’s first name, you use the expression firstNameNode.firstChild. To extract the text from that text node, you use the nodeValue property, so here’s how you recover the person’s first name:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   lastNameNode = firstNameNode.nextSibling;      displayText = "The third guest was " +   firstNameNode.firstChild.nodeValue + ' '   .   .   . }

Similarly, here’s how you recover the person’s last name:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   lastNameNode = firstNameNode.nextSibling;   displayText = "The third guest was " +     firstNameNode.firstChild.nodeValue + ' '     + lastNameNode.firstChild.nodeValue;     .     .     . }

All that’s left is to display the person’s name, using the displayText string:

 function displayThirdGuest (xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild;   peopleNode = eventNode.lastChild;   personNode = peopleNode.lastChild;   firstNameNode = personNode.firstChild;   lastNameNode = firstNameNode.nextSibling;   displayText = "The third guest was " +     firstNameNode.firstChild.nodeValue + ' '     + lastNameNode.firstChild.nodeValue;   var target = document.getElementById("targetDiv");   target.innerHTML=displayText; }

And that completes event.html, which recovers the third person’s name and displays it. However, as written, this example only works in Internet Explorer. Why won’t it work in the Mozilla, Netscape, and Firefox Web browsers?



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