You can access data in XML documents using JavaScript in several ways, and I'll take a look at them here. The idea is that you load the XML document in behind the scenes, work with it by extracting the data you want, and then display your results using HTML. To see how this works, I'll use our XML document, 22-01.xml, throughout this chapter. The data I'll extract is the first and last name of the third person attending the event, who we'll consider the main guestin our case, that's Cary Grant: <EVENTS> <EVENT TYPE="informal"> <EVENT_TITLE>15th Award Ceremony</EVENT_TITLE> <EVENT_NUMBER>1207</EVENT_NUMBER> <SUBJECT>Gala Event</SUBJECT> <DATE>7/4/2003</DATE> <PEOPLE> <PERSON ATTENDENCE="present"> <FIRST_NAME>Sam</FIRST_NAME> <LAST_NAME>Edwards</LAST_NAME> </PERSON> <PERSON ATTENDENCE="absent"> <FIRST_NAME>Sally</FIRST_NAME> <LAST_NAME>Jackson</LAST_NAME> </PERSON> <PERSON ATTENDENCE="present"> <FIRST_NAME>Cary</FIRST_NAME> <LAST_NAME>Grant</LAST_NAME> </PERSON> . . . One way to load this document into the Internet Explorer is with the Internet Explorer ActiveX object named Microsoft.XMLDOM . ( More recent ActiveX XML objects are available too; see the discussion at the end of this chapter about XSLT.) First, I create an object of this kind and then use its load method to load our XML document, 22-01.xml (you can pass any URL to the load method): var document1 document1 = new ActiveXObject("Microsoft.XMLDOM") document1.load("22-01.xml") . . . That loads the XML document into memory. The next step is to get access to the document element in our XML document, which is the all-enclosing <EVENTS> element. You can refer to that element with the documentElement propertyand when you have access to the document element, you have access to the whole document. For example, we can now use the W3C node-navigation properties we saw in Chapter 5, "Using Core HTML Properties," such as firstChild , lastChild , nextSibling , and so on, to navigate through the XML document to the nodes from which we want to extract data: var document1, eventsNode, eventNode, peopleNode var firstNameNode, lastNameNode, displayText document1 = new ActiveXObject("Microsoft.XMLDOM") document1.load("22-01.xml") eventsNode = document1.documentElement eventNode = eventsNode.firstChild peopleNode = eventNode.lastChild personNode = peopleNode.lastChild firstNameNode = personNode.firstChild lastNameNode = firstNameNode.nextSibling . . . To actually get the data we want from the nodes we now have access to, you just use the nodeValue property: (Listing 22-02.html on the web site)<HTML> <HEAD> <TITLE> Accessing XML Elements </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function reader() { var document1, eventsNode, eventNode, peopleNode var firstNameNode, lastNameNode, displayText document1 = new ActiveXObject("Microsoft.XMLDOM") document1.load("22-01.xml") eventsNode = document1.documentElement eventNode = eventsNode.firstChild peopleNode = eventNode.lastChild personNode = peopleNode.lastChild firstNameNode = personNode.firstChild lastNameNode = firstNameNode.nextSibling displayText = "The main guest was: " + firstNameNode.firstChild.nodeValue + ' ' + lastNameNode.firstChild.nodeValue div1.innerHTML=displayText } //--> </SCRIPT> </HEAD> <BODY> <H1> Accessing XML Elements </H1> <INPUT TYPE="BUTTON" VALUE="Get the name of the main guest" ONCLICK="reader()"> <BR> <DIV ID="div1"></DIV> </BODY> </HTML> And that's all it takeswhen the user clicks the button with the caption "Get the name of the main guest," our JavaScript code will load in the XML document, navigate to the data we want, and display that data in a <DIV> element. You can see this code at work in the Internet Explorer in Figure 22.2. When the user clicks the button, the XML document 22-01.xml is read, parsed, and we retrieve and display the third person's name. Now we're accessing the data in XML documents. Figure 22.2. Reading data from an XML element.
|