While XML is a new product, it works very well with HTML and its related products, such as JavaScript and CSS. In particular, XML can exist in what are called "XML Data Islands" inside HTML. We will introduce the process of converting XML to HTML by starting with examples that emphasize the familiar features of HTML and its brethren while progressively unveiling more features that manipulate XML.

Note that HTML and JavaScript processing of XML files requires not only that the XML be well formed, but that it be valid as well (XML writer is a $40 product that validates XML files as well as processes XSL. There are also free XML validators on the Web that are designed for occasional use, such as: XML Checker and STG Validator which validates XML files on your desktop. You could also use "google" and search for the phrase "validate XML" for other examples).

Using a Restricted Form of XML

• Example 1: Show All Records
  This first example simply shows all records in a simple tabular data set. It contains no XML statements at all, but reads in an XML data set into an HTML table.

• Example 2: Move Through One Record at a Time
  This example moves through one record at a time, and introduces a little JavaScript manipulation of XML functions.

• Example 3: Search for Records Which Match a String
  This example shows how you can specify an XML file from an HTML FORM, and search records based on their content.

• Example 4: Edit Records One At A Time
  The last example in this set is a fairly large JavaScript program to add, remove, and edit records one at a time. This includes code to save the edited XML file under a name that you choose. It does this by calling a small CGI program named xml.cgi that looks like this:

  #!/usr/local/bin/perl
  #
  require 'cgi-lib.pl';
  &ReadParse(*in);
  
      $myxml = $in{'Sfile'};
      open(XMLout, ">$myxml");
      print XMLout $in{'hideXML'};
      close(XMLout);
  
  print "Content-type: text/xml \n\n";
  print <<ENDOFTEXT;
        $in{'hideXML'}
  ENDOFTEXT
  

• Example 5 (assignment):
  Create a simplified version of the "booklist.xml" data file that has only two types of elements: TITLE and AUTHOR as well as the same attributes for ITEM. Validate this file and create a version of "Example 2" above which works for this simplified XML file. You can do this as follows:
  1. Click on the "booklist.xml" link and then click "View > Source" to view the raw data. Edit the DTD to limit it to TITLE and AUTHOR elements, and edit the XML data file to reduce the number of "Items" to two, and change the elements in the remaining two to reflect the DTD. Then save the file on your desktop, say as "bklist.xml". Then use the "STG Validator" link to validate it.
  2. Click on the link for the 2nd example, view the source, and edit it by changing the "SRC="booklist.xml" file name and changing the lines between "Code:" and "Sales to date:" to reflect the simplified XML file. Save this on your desktop as, say, bklist.htm". By the way if you click with the -right- mouse on the "bklist.xml" file that you created in the first step and select "Properties", you can find the full path name of "bklist.xml" to replace the "booklist.xml" filename in the "SRC="booklist.xml"
  3. Then drag the the "bklist.htm" file over any web browser window and you should should see and interact with the new results.

Using the Full Unrestricted XML Format

It is important to note that an XML document has a tree structure above and beyond the structure of the data elements themselves. The overall structure of an XML document is something like this:

Document | 
         |-- Processing Instruction 
         |   (e.g., <?xml version="1.0">
         |
         |-- Comment
         |   (e.g., <!-- student DB file -->
         |
         |-- DTD
         |   (e.g., <!DOCTYPE BOOK SYSTEM "books.dtd">
         |
         |-- XML data file itself ...
         |

theRoot = XMLdoc.documentElement;

Note: in the examples that follow, you may use any of these XML files for test purposes:

• booklist.xml A book list
• booklist_dtd.xml A long booklist
• furn-schema.xml A small furniture database (here is its XML Schema)
• manybooks.xml A Book List with a deeper tree
• purchaseOrder.xml a Purchase Order database

• Example 5: Display All Nodes in an XML File
  This example simply visits each element node in a tree and prints out its value.

• Example 6: Display All Elements of a Certain Name
  This scans through the tree, using a simple non-recursive function, and displays the value of all elements of a certain name.

• Example 7: Search for Any Element That Matches a String
  This scans through the tree and locates the element (actually the parentNode) that contains part of the search string

• Example 8: Search for Specific Elements that Match a String
  This uses a non-recursive technique to locate those elements of a certain name that match a string.

• Example 9: Search for Any Element or Attribute that Matches
  This example uses a full recursive scan to search for all all elements OR attributes that match an input string.

• Example 10: Edit an XML File
  This example scans any XML file to add, remove, or modify element nodes in a tree that match a certain string. All nodes that match a string are subject to removal or modification, but addition of a node only takes place immediately before the node that matches.

Course Topics

The relationships among HTML, JavaScript, XML, XSL, and XPATH

The process of converting XML to HTML or other forms of XML

Converting XML to HTML using HTML and JavaScript

Xpath

Converting XML to HTML using XSL

Major Structures in XSL