Accessing XML Documents


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.

graphics/22fig02.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

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