XML: Client Side Processing

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 XML by starting with examples that emphasize the familiar features of HTML and its brethren while progressively unveiling more features that characterize XML.

Here is a translation in Spanish

Using a Restricted Form of XML

The first set of examples use an XML structure that is very common and widely used, and which map easily into HTML. It is called a "tabular" or rectangular data set. The restrictions are:

The XML contains element nodes only and no attributes

The tree structure is only one level deep, e.g.,

                       Root 
                        |
         o-------------------------------o
         |              |                |
         |              |                |
    o-o------o     o-o-------o      o-o--------o
    | | ...  |     | | ...   |      | | ...    |
    | | ...  |     | | ...   |      | | ...    |
    * *      *     * *       *      * *        *

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 which lets you add, remove, and edit records one at a time. Note that the editing is done only on the cached version of the XML recordset on the client and does not affect the copy on the server. That requires additional steps.

Using the Full Unrestricted XML Format

The following examples are fully general and can process any XML data file of any type or complexity. The key ingredient for most of them is a recursive function that "walks" through the tree so it can visit any element node or attribute. The basic recursive program, written in JavaScript, is only about 10 lines long, but may be conceptually difficult to understand simply because it is recursive.

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 ...
         |

The actual XML file is but a branch of a tree that usually contains two or three other branches. Let "XMLdoc" be the name of an XML document. Then the root of the actual XML file is given by:

theRoot = XMLdoc.documentElement;

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.