Accessing XML Data Directly
There’s a more direct way of accessing XML data if you want simply to grab data from a specific XML element: You can search for that XML element using the getElementsByTagName method. This method returns an array of elements, which makes navigating through an XML document very easy. You can see an example, event2.html, in Figure 9.6.
Figure 9.6: An example that accesses the third guest directly
When you click the button in this example, the third guest is fetched from event.xml and displayed, just as before, which you can see in Figure 9.7.
Figure 9.7: Accessing the third guest directly
Here’s how event2.html works. It starts by creating the button you see in Figure 9.6, and connecting that button to a function named getData:
<body> <h1>Accessing an XML element directly</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>
Next, in the getData function, the code creates an XMLHttpRequest object:
function getData() { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } . . . } If that object was created successfully, the code downloads the XML data, passing it to a function named displayThirdGuest:
function getData() { 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; displayThirdGuest(xmlDocument); } } XMLHttpRequestObject.send(null); } } Now it’s up to the displayThirdGuest function to handle the XML document:
function displayThirdGuest (xmldoc) { . . . } The code here starts by using the getElementsByTagName method to get an array of <first_name> elements:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); . . . } That’s how you access elements using getElementsByTagName: you pass this method the name of the element you’re interested in, and it returns an array of elements matching the name you supply, or null if no elements matched what you’re looking for.
You can also get an array of <last_name> elements:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); lastnamenodes = xmldoc.getElementsByTagName("last_name"); . . . } To get the first name of the third guest, you can access firstnamenodes[2]:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); lastnamenodes = xmldoc.getElementsByTagName("last_name"); var displayText = "The third guest was: " + firstnamenodes[2]... . . . } Accessing firstnamenodes[2] gives you the <first_name> node, and you need the value of the text node inside that element:
<?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>
You reach that text node as the first child of the <first_name> element, and get the contents of that text node with the nodeValue property:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); lastnamenodes = xmldoc.getElementsByTagName("last_name"); var displayText = "The third guest was: " + firstnamenodes[2].firstChild.nodeValue + ' ' . . . } Similarly, you can get access to the third guest’s last name:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); lastnamenodes = xmldoc.getElementsByTagName("last_name"); var displayText = "The third guest was: " + firstnamenodes[2].firstChild.nodeValue + ' ' + lastnamenodes[2].firstChild.nodeValue; . . . } All that’s left is to display the third guest’s name:
function displayThirdGuest (xmldoc) { firstnamenodes = xmldoc.getElementsByTagName("first_name"); lastnamenodes = xmldoc.getElementsByTagName("last_name"); var displayText = "The third guest was: " + firstnamenodes[2].firstChild.nodeValue + ' ' + lastnamenodes[2].firstChild.nodeValue; var target = document.getElementById("targetDiv"); target.innerHTML=displayText; } That’s it; you’ve accessed the third guest with remarkably little code. All you had to do was use the handy getElementsByTagName method, which saved you the trouble of navigating through the entire document. As you can see, the getElementsByTagName method is a very handy one, and saves you from having to know the detailed structure of the document beforehand.
