WebReference.com - Part 2 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (3/7)

To page 1To page 2current pageTo page 4To page 5To page 6To page 7
[previous] [next]

Professional JavaScript 2nd Edition

An Alternative Using XML Data Islands

XML data islands are supported by IE 5+ and can be accessed easily from JavaScript but this is not yet available on other browsers in a portable manner.

The XML data island is created with the XML tag. The navigation mechanism is different to that normally used. We would usually expect to build a tree of nodes using ID values assigned as HTML tag attributes. This XML navigation technique uses tag names for navigation and is a lot more powerful.

Here, is an example of a block of XML in the middle of a HTML document:

<XML ID='myBlock'>
   <METADATA>
      <OWNER>Wrox</OWNER>
      <DATATYPE>Example</DATATYPE>
      <ABSTRACT>This is an example block of text.</ABSTRACT>
   </METADATA>
</XML>

Individual nodes in that so-called data island can be accessed through this XMLDocument property. The object returned by this property responds to the selectSingleNode() method. The argument to this is the slash-separated path to the node within the document you are looking for. The slash-separated values are the XML tagnames used to construct the document.

In this example, they all begin with the string "METADATA", and since the document only contains one layer inside that, all nodes can be reached with the following strings:

Given that our XML block has an ID value of "myBlock", this line of script code should yield a reference to an object that encapsulates the ABSTRACT node:

myBlock.XMLDocument.selectSingleNode("METADATA/ABSTRACT")

Having accessed the DOM node you want, its content can be examined by looking at its text property.

The example code illustrates this concept as it might be assembled together in a simple page:

<HTML>
<BODY>
<!-- Create an XML island -->
<XML ID='myBlock'>
  <METADATA>
     <OWNER TYPE='PUBLISHER'>Wrox</OWNER>
     <DATATYPE>Example</DATATYPE>
     <ABSTRACT>This is an example block of text.</ABSTRACT>
  </METADATA>
</XML>
<SCRIPT LANGUAGE="JavaScript">
// Get the XML island block
myXMLBlock = document.getElementById("myBlock");
// Get the DOM document
myXMLDocument = myXMLBlock.XMLDocument;
// Find the node
myNode = myXMLDocument.selectSingleNode("METADATA/ABSTRACT");
// Display the text in the node
alert(myNode.text);
// Now access node attributes and content
myOwner = myXMLDocument.getElementsByTagName('OWNER')[0];
alert(myOwner.getAttribute('TYPE') + ': ' + myOwner.text);
</SCRIPT>
</BODY>
</HTML>

That lets us have some very convenient access to textual data, but this is only available in Windows-based versions of IE 5+. We can still accomplish largely the same effect with DIV blocks. We can at least build some structure and give them unique ID values.

Inserted and Included JavaScript Code

JavaScript code inserted into the document using an include mechanism, is an ideal solution for getting the data feed into the ticker. At News Online, we found that the data coming from the existing feed could not be changed because other systems depended on it. The format of data was such that valid and syntactically correct JavaScript could not be generated reliably due to the placement of certain quote characters. That won't be a problem for us here as we develop a ticker design from scratch and this is likely to be the approach we shall adopt for our optimally designed ticker.

Here is an example of how we can accomplish this. It is amazingly simple, which also makes it a very attractive option.

Save this fragment of script in a file called data.js:

var myData1 = "String one";
var myData2 = "String two";
var myData3 = "String three";

Now we can include that file using a <SCRIPT SRC=""> tag:

<HTML>
<SCRIPT SRC="data.js"></SCRIPT>
   <SCRIPT LANGUAGE="JavaScript">
   function init()
   {
      // Locate the target DIV block
      myTarget = document.getElementById("TextBox");
      // Store the values extracted from the script
      myTarget.innerHTML = myData1 + "<HR>" + myData2 + "<HR>" + myData3;
   }
   </SCRIPT>
<BODY onLoad='init()'>
<DIV ID='TextBox'>
</DIV>
</BODY>
</HTML>

The really neat thing about this approach, is that it factors the ticker code and the data into separate files, and the data in the included file can be rendered from a publishing system quite independently of the ticker software.


To page 1To page 2current pageTo page 4To page 5To page 6To page 7
[previous] [next]

Created: November 8, 2001
Revised: November 8, 2001


URL: http://webreference.com/programming/javascript/professional/chap21/2/3.html