Retrieving Data from an XML Document
Take a look at event.html, which is shown in Figure 9.3.
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.
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?
