JavaScript Design
March 21, 2002
Chapter 17: Working with XML and JavaScript
Contents:
-
The XML Mystique
-
What Is XML?
-
Reading and Showing XML Data with JavaScript
The XML Mystique
The eXtensible Markup Language (XML) is one of those languages
that you hear a lot about, and generally in the superlative, but
not too many people are exactly sure what it is. At this point
in time, both Netscape Navigator and Internet Explorer are on
the verge of fully connecting JavaScript and XML using the W3C
Document Object Model (DOM). Because the HTML, JavaScript, and
XML DOMs are beginning to form around the same object model, you
can better understand where JavaScript and HTML are headed by
understanding XML.
Microsoft has provided one way of examining XML documents with
IE5+ using platform-specific keywords on Windows platforms. As
both NN6 and IE6 mature, working with XML will not require a
separate module to load XML. So, even though limited to the
Windows platform and IE5+ browser, you can see how JavaScript
can be used to pull data out of an XML file and display it on
the screen.
If you have ever seen stockbrokers at work on Wall Street, you
might have noticed that they have several computers and
monitors. What you are seeing is actually different databases
being sent over different proprietary systems. Instead of
needing different systems for each database, XML can put any
database into a format that can be read by any computer with the
right browser. At this point in time, XML is ahead of the
browsers.
Because this single chapter is a scratch on the surface of XML,
I highly recommend a more thorough treatment of the topic.
Inside XML, by Steven Holzner (New Riders, 2001), is an
excellent source of XML and has a great chapter on using
JavaScript with XML. Mr. Holzner's book has more than 1000 pages
that look into just about every nook and cranny of XML, and it
is well worth taking a look at.
What Is XML?
XML organizes and structures data for the web. In many ways, it
is like a database; in others, it is like a text file storing
data. However, XML looks a lot like an HTML page as well, but
with no built-in formatting tags. XML tags only order data. All
of the tag names in XML are ones provided by the designer. For
most XML pages, you can determine approximately what the
structure is by examining the file. The following page is an
example:
<?xml version="1.0" ?>
<writers>
<pen>
<name>Jane Austin</name>
</pen>
<pen>
<name>Rex Stout</name>
</pen>
</writers>
You can write this document in your favorite text editor, such
as Notepad in Windows or SimpleText on the Macintosh. Save it as
writers.xml. (All XML documents can be written and saved as text
files.) If you load the XML page into IE5+ or NN6+, you will see
this:
Jane Austin Rex Stout
XML is for structuring data, not formatting it, and you need
something to show that data in a useful way. Most developers use
Cascading Style Sheets (CSS). For example, the following CSS
script provides formatting in the form of an 11-point bold navy
Verdana font for the data in the XML file:
name {
display:block;
font-size: 14pt;
color: navy;
font-weight: bold
}
By saving the file as an external style sheet named scribe.css, you can use
it to format the elements with the tag label name. Note that
name is not a dot-defined class or an ID. It is the name
of the label in the XML script.
XMLsee.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="scribe.css"
?>
<writers>
<pen>
<name>Jane Austin</name>
</pen>
<pen>
<name>Rex Stout</name>
</pen>
</writers>
The output is now formatted, and your screen shows this:
Jane Austin
Red Stout
You can use the same style sheet with your HTML/JavaScript pages
as you do with XML. However, in creating the style sheet, this
line in the CSS script has the effect of blocking the text on
separate lines:
display: block;
Working with XML and JavaScript Page 2
|
