Extensible Markup Language (XML)

Note:  You should view this document in Internet Explorer 5.0.
The document contains examples of XML and XSL, and Internet Explorer is the first browser to support these technologies.

Note:  There appears to be a bug in IE5 (at least version 5.00.2614.3500). If you display the html files linked to by this document in IE5, you will get a scripting error.  The error suggests that the xml document referenced by the html document doesn't exist.  You can get around the problem by saving the html and any xml files that it references to your local file system, then opening the local copy of the file.

(The ActiveX component microsoft.xmldom's load method, when given a URL, returns immediately, before the URL is actually transferred to the browser.  You should be able to set the ActiveX object's aync variable to false so that the load blocks, but this does not appear to work correctly.  Click here for an html file that does work properly, but contains a workaround (displaying alert boxes to slow down the rendering until the URL arrives)  Use menu item "Source" under the "View" menu to see the html and JavaScript.

1. Some Benefits of XML

Data files become self-describing

• In the old days, an application read files that looked like this:
BMW-M5 5 4.9 400 4.7 13.2 107.4 69400
FIREBIRD-TRANSAM 2 5.6 320 5.0 13.5 107.4 26630
The data is about automobiles, but what do all the numbers mean?

Worse, in 10 years no one may be able to read the file if the documentation of the fields is lost.

The application required a custom parser, and needed a priori knowledge of the file format.
 
 

• With XML, the file looks like this:

<?xml version="1.0"?>

<AUTOS year="2000">

  <AUTO name="BMW M3">
    <DOORS>5</DOORS>
    <ENGINE displacement="4.9" horsepower="400"/>
    <PERFORMANCE>
      <ZEROTO60>4.7</ZEROTO60>
      <QUARTERMILE second="13.2" mph="107.4"/>
    </PERFORMANCE>
    <PRICE>69400</PRICE>
  </AUTO>

  <AUTO name="FIREBIRD-TRANSAM">
    <DOORS>2</DOORS>
    <ENGINE displacement="5.6" horsepower="320"/>
    <PERFORMANCE>
      <ZEROTO60>5.0</ZEROTO60>
      <QUARTERMILE second="13.5" mph="107.4"/>
    </PERFORMANCE>
    <PRICE>26630</PRICE>
  </AUTO>

<AUTOS>
 

[Above xml doc is in this file...]

Now you know what all those fields mean!

The XML format is easier to understand, and is self-documenting.

Application programs can easily access file without knowing file's syntax:

Give me the second PRICE in AUTOS

Terminology:

<ZEROTO60>5.0</ZEROTO60> is an element
<ZEROTO60> is a tag
In <QUARTERMILE second="13.5" mph="107.4">, second and mph are attributes

XML permits standard tools - like parsers and structured text editors

The application author no longer needs to write a customer parser.

XML can be represented by a tree - making traversal easy

This idea is embodied in the Document Object Model (DOM).

DOM returns 26630 when asked "Give me the second PRICE in AUTOS"

XML can be used for any data interchange!

XML may become the language for all data interchange among applications on computers in the Internet - whether for web pages, data base queries, remote procedure calls, or whatever.

You can automatically populate a document template with XML

Here's an example of applying this html template to the above xml document:

(Note:  if you click on "this" in the last sentence and get an error message, try saving the last two links to local files in the same directory, then opening the local copy of the html file.)

Here are 10 more points describing XML

• Click here to read XML in 10 points.

2. XML is a Meta-Language

• You cannot use XML "raw".
• You must define a vocabulary of tags for your use.
• You may optionally create a Document Type Definition (DTD) - a grammar telling a parser how to parse a document using your tags.
• This "meta-langauge" approach makes the language extensible.  People with common interests can define their own markup languages and standardize just within their own community (e.g, chemists).

Exercise 1:  What does a Web Browser do with an XML Doc?

1. Start Internet Explorer 5 (IE5).
2. Click on this link to view the xml doc above.
3. Click on the + and - symbols in the IE5 display to see what happens.
4. Note that IE5 nicely formats the xml tags for you.

Exercise 2:  What If an XML Doc is Missing an End Tag?

• An xml parser by default checks that a document is well-formed.
• Tags must have a start and matching end.  There are two syntaxes; either
<AUTO>...</AUTO>
or
<AUTO/>
• Tags must nest.  This is ok, and can be mapped to a tree:
<AUTO><DOORS>...</DOORS></AUTO>
but this is a syntax error:
<AUTO><DOORS>...</AUTO></DOOS>
• Try this:
1. Save the xml doc above to a local file.
2. Edit the file to reverse the order of two tags.
3. Display the result in IE5 to see what happens.
4. Edit the file to delete one of the tags you reordered.
5. Display the result in IE5 to see what happens.

Exercise 3:  How Do We Create an HTML Doc from the XML Doc?

This is done by creating an HTML file with missing parts (to be filled in by XML), then do one of two things...

1. Insert scripting into HTML file that populates missing parts.
2. Create an XSL (Extensible Style Language) file, which transforms XML to HTML (discussed here).


Here is part of an html file for our xml example:
 

<HTML>

<HEAD>
<TITLE>Automobile Buyer's Guide</TITLE>
</HEAD>

<BODY>

<TABLE width=100% BORDER=1>
<TR>
<TD>Automobile Buyer's Guide for </TD>
<TD>Model: </TD>
</TR>

<TR>
<TD>Body style</TD>
<TD>-door</TD>
</TR>

<TR>
<TD>Engine displacement</TD>
<TD> liters</TD>
</TR>

</TABLE>

</BODY>
</HTML>


Click here to view this file in IE5.0.

Now we need a way to populate it.  So we do this:
 

<HTML>
<HEAD>
<TITLE>Automobile Buyer's Guide</TITLE>
<SCRIPT>
function init() {
  xml = new ActiveXObject("Microsoft.XMLDOM");
  xml.load("Autos.xml");

  //Some stuff to fill in the missing HTML parts

}
</SCRIPT>

</HEAD>

<BODY onload="init()">
...
</BODY>
</HTML>

• The BODY tag says to call function init() when the page is first loaded, before display.  The JavaScript init() function then creates (via new ActiveXObject("Microsoft.XMLDOM")) an instance of the XLM Document Object Model object.
• Then the XMLDOM parses the xml file (via xml.load("Autos.xml")) and allows access later using the doted notation to parts of the object tree.
• The rest of function init() will pick out the various fields of the xml file and insert them into the <BODY> section.
But how do we insert "variables" into the BODY section so we can refer to them in the script?  Here's how:
 
<TR>
<TD>Automobile Buyer's Guide for <SPAN ID=Year></TD>
<TD>Model: <SPAN ID=Name></TD>
</TR>

<TR>
<TD>Body style</TD>
<TD><SPAN ID=Doors></SPAN>-door</TD>
</TR>

<TR>
<TD>Engine displacement</TD>
<TD><SPAN ID=Displacement></SPAN> liters</TD>
</TR>


So the <SPAN> with an empty body is a placeholder, and the ID declares it a name that can be used in the script.

We then make the script's init() function this...
 

function init() {
  xml = new ActiveXObject("Microsoft.XMLDOM");
  xml.load("Autos.xml");

  // Get the AUTOS object
  autos = xml.documentElement;
  Year.innerHTML = autos.getAttribute("year");

  // Get the AUTO object
  auto  = xml.getElementsByTagName("AUTO").item(0);
  Name.innerHTML = auto.getAttribute("name");

  // Get the number of doors
  Doors.innerHTML = xml.getElementsByTagName("DOORS").item(0).text;

  // Get engine info
  Engine = xml.getElementsByTagName("ENGINE").item(0);
  Displacement.innerHTML = Engine.getAttribute("displacement") + " ";
}

Some notes:

• The <SPAN ID=foo> tags in the html body act like variables.  The Javascript replaces those variables with strings
• Two useful DOM functions are
• getElementsByTagName, which finds something like <AUTO>
• getAttribute, which finds something like name="BMW M5" in the <AUTO> tag.
• Year.innerHTML:  innerHTML is a predefined document part, which refers to the inside of the tag whose ID=Year.  So if Name.innerHTML = "xyz", then later in the HTML document
Automobile Buyer's Guide for <SPAN ID=Year>
becomes
Automobile Buyer's Guide for xyz
• You can construct new strings to insert into the <SPAN> tags by using things like concatenation ("+")
• X.item(0) refers to the first child of X.
• Y.text refers to the body of Y.

Result...

The result is this html file.  (Use the View->Source menu item to see the full html file!)

Hint:  If you want to create xml and html files like this on your server, be sure that you server's configuration files return a mime type of "text/xml" for files ending with the .xml extension.  Otherwise when IE5 interprets your html file, "xml.load("Autos.xml");" will either cause an access violation or return an illegal object.

Exercise 4:  What if You Modify XML Doc, But Insert a Typo?

Suppose that you have a bad memory for tag names, and try to create the xml file from memory, and you use <CARS> instead of <AUTOS>.

Will an XML parser like that in IE5 complain?  (Try it!)
To catch illegal tag names, attribute names, or illegal data type of bodies inside tags, you need a grammar.
 

How Grammars are Specified in XML

The grammar of our XML example can be specified something like this:

In XML the grammar is represented by a Document Type Definition (DTD):

<!ELEMENT AUTOS (AUTO)>
<!ATTLIST AUTOS
          year CDATA #REQUIRED>
<!ELEMENT AUTO (DOORS, ENGINE, PERFORMANCE, PRICE)>
<!ATTLIST AUTO
          name CDATA #REQUIRED>
<!ELEMENT DOORS EMPTY>
<!ELEMENT ENGINE EMPTY>
<!ATTLIST ENGINE
          displacement CDATA #REQUIRED
          horsepower CDATA #REQUIRED>
<!ELEMENT PERFORMANCE (ZEROTO60, QUARTERMILE)>
<!ELEMENT ZEROTO60 EMPTY>
<!ELEMENT QUARTERMILE EMPTY>
<!ATTLIST QUARTERMILE
          second CDATA #REQUIRED
          mpg CDATA #REQUIRED>
<!ELEMENT PRICE EMPTY>

[Above DTD is in this file...]

The final step is to add a line to the XML document naming the DTD as the second line:

<?xml version="1.0"?>
<!DOCTYPE BuyerGuide SYSTEM "Autos.dtd">

Notes on the example DTD:

• <! is an escape character -- it mark something that is not part of the xml doc itself.
Think of <!-- ... --> to mark a comment in HTML!
• !ELEMENT defines the tags in the language -- "AUTOS", "ENGINE", and so on.
• Syntax like
<!ELEMENT AUTO (DOORS, ENGINE, PERFORMANCE, PRICE)>
means the child of AUTO is a DOORS tag followed by an ENGINE tag, and so on.
• DOORS+ means one or more instances of the DOORS tag
• DOORS? means zero or one instance of the DOORS tag
• DOORS* means zero or more instances of the DOORS tag
• !ATTLIST says what attributes are legal for an element
• !ENTITY introduces identifiers like %AutoName, which are made equivalent to some primitive XML type (like NMTOKEN - a "name token").
• #REQUIRED says whether an attribute is needed or not or has a default and so on.
• #IMPLIED=optional and no default value exists
• #REQUIRED=attribute must be included in every element
• #FIXED=what follows is a value in quotes for the attribute

Exercise 5:  Add Style to the HTML Doc

1. Modify the html doc to link to a CSS style sheet that dresses up the doc.
2. Add a few more rows to the table with more info from the XML doc (0-60 time, etc.)

Exercise 6: Using JavaScript Loops

Suppose we want out HTML document to list the names of all automobiles from the XML file. The suffix .length applied to one of the methods of Microsoft.XMLDOM is useful to create a JavaScript loop to process all tags with some tag name. Here is an example of how to list the names of all the automobiles in an XML file:

<HTML>
  <HEAD>
  <TITLE>Automobile Buyer's Guide</TITLE>
  </HEAD>
  <BODY>
    <p>Here is a list of all autos:
  <SCRIPT>
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.load("Autos.xml");
   auto_array = xml.getElementsByTagName("AUTO");
   i = 0;
    while (i < auto_array.length) {
    document.write("<p>Auto #" + i + " is " + auto_array.item(i).getAttribute("name"));
    i++;
    }
  </SCRIPT>
  </BODY>
</HTML>

Click here to download this HTML file. Note in the HTML above that JavaScript directly writes the HTML markup. This is because the number of lines of output is now variable, and depends on the XML file. Therefore the JavaScript cannot easily use the .innerHTML notation from Exercise 5 to insert the body of a <SPAN> element.

References

• Extensible Markup Language (XML) 1.0, W3C Recommendation 10-February-1998,http://www.w3.org/TR/REC-xml.
• The Annotated XML 1.0 Specification, http://www.xml.com/axml/testaxml.htm
• Mariva H. Avram, XML for Dummies,IDG Books, 1998.  [Somewhat outdated, but handy to use]
• Dino Esposito, "XML Languages," Microsoft Internet Developer (MIND), June 1999.  [Gives concrete example with complete code for using XML, DTD, and CSS without XSL and with Javascript to generate an HTML doc in Internet Explorer 5.]
• Dino Esposito, "XML Server Pages," Microsoft Internet Developer (MIND), July 1999.  [Gives concrete example with complete code for using XML, DTD, and CSS with XSL to generate an HTML doc in Internet Explorer 5.]
• Microsoft Corp., XMLDOMDocument Interface. [Documents the API for ActiveX object microsoft.xmldom.]
• Brian Randell, A Beginner's Guide to the XML DOM, MSDN Online Web Workshop, Oct. 1999.  ["This article discusses how to access and manipulate XML documents via the XML DOM implementation, as exposed by the Microsoft® XML Parser."