N341  Client-side XML

• XML Starter
  • Overview
  • Exercise 1 - XML Tutorial
• Client Side Page Generation
  • Exercise 2 - Client Side Page Generation
• User Interaction
  • Exercise 3 - User Interaction

Note

• Browser - IE caches files by default which can prevent opening of a later version. The effect is particularly noticeable during repeated tests when XML references an XSL file that has been changed but is not opened because of a cached version of the XSL.

The solution is to require IE to check for new versions on every visit to a page. In IE: Tools | Internet Options | Temporary Internet Files | Settings | Every Visit to Page

• XML/XSL - Syntax checking of XML/XSL is rigorous, flagging errors that would be ignored in HTML by the browser.  For example, the following is acceptable as HTML:

<FORM NAME=ONE>
    <INPUT type=text name="TWO" >
</form>

but has the following errors as XML/XSL:

1. ONE must be quoted,
2. text must be quoted,
3. INPUT requires a matching end tag </INPUT>
4. </form> must match <FORM>

Below is valid XML/XSL:

<FORM NAME="ONE">
    <INPUT type="text" name="TWO"/>
</FORM>

Overview

A simple example of XML use is to supply structured data to an application. Information for shipping a package from one Zip code to another can be specified in XML with a hierarchy as:
 

<package>    <To>47150</To>    <From>47165</From>    <Weight>17.0</Weight>    <Rate>27.50</Rate>   </package>

Hierarchical element structure - XML documents must have a strictly hierarchical tag structure. That is, start tags must have corresponding end tags. In XML vocabulary, a pair of start and end tags is called an element. Any element must be properly nested within another. As illustrated above, the snippet is well-formed because if there is a <To> start tag there must be an </To> end tag.

Many languages and applications such as Web browsers can parse XML to extract the data from the structure. The following brief example illustrates how XML, HTML, and JavaScript would be used to define and access the data structure containing shipping information. The results can only be viewed in an XML enabled browser such as IE4 and above that support the MicroSoft XML objects.

The following JavaScript is embedded within an HTML file interpreted by a XML aware browser. The syntax below has the following meaning:

• <SCRIPT LANGUAGE="xml" ID="UPSOnLine"> - Whatever follows to the </SCRIPT> tag is XML. The XML structure has ID UPSOnLine.
• <SCRIPT LANGUAGE="JavaScript"> - Whatever follows to the </SCRIPT> is JavaScript.
• document.write("<H2>UPS ShippingRate</h2>"); - Write to the browser display as HTML <H2>UPS ShippingRate</h2>.
• UPSOnLine.XMLDocument.documentElement.childNodes.item(1).text
  • UPSOnLine - the XML structure.
  • XMLDocument - the complete XML document attribute.
  • documentElement - top level of the XML document (i.e. <package>).
  • childNodes - nodes below the top level (i.e. <package>).
  • item(1) - <From> child node.
  • item(1).text - 47165 is text of child node.

Client Side Table Generation from XML

XML can serve as a data source to a XML-capable client browser such as IE which can then generate tables and other HTML document information by parsing and extracting tags, attributes, etc. The data source can be a data island in the HTML or a URL to an ASP or CGI that generates the XML as in the above examples. The following generates a table from the XML datasource xmlDoc1 below and from the Employees.xml file as datasource xmlDoc2 located on the server.

Note that to generate the XML from an ASP script Employees.Asp simply replace the Employees.XML file name with the ASP script name.
        James     Borg         Joyce     English  

<Employees>
  <Employee>
    <First>James</First>    <Last>Borg</Last> <SSN>123456789</SSN>
  </Employee>
  <Employee>
    <First>Joyce</First>    <Last>English</Last> <SSN>222334444</SSN>
  </Employee>
</Employees>

<XML ID="xmlDoc2" SRC="Employees.xml"></XML>

<table BORDER dataSrc="#xmlDoc2" >
  <THEAD> 
     <tr><th>First</th><th>Last</th></tr></THEAD>
     <tr>
         <td><span dataFld=First></span></td> 
         <td><span dataFld=Last></span></td>
     </tr>
</table>
 

XML from file

XML can be dynamically generated, such as retrieving from a database file.

The key is defining the dataFld to match those of the XML.

The following HTML (portfolio.htm) downloads the static XML file (Portfolio.xml) and creates a table with selected fields.

The table definition must reflect the structure of the XML; nested data require nested tables.

The outer table datafld corresponds to the xml element, the next table datafld to the rs:data element; the inner-most table datafld to the z:row element, whose attributes are the values of the fields for that row.

To display data from the XML, the spans within the table are bound to the actual field names of the XML (e.g. datafld="ID").

Notice that thead defines the table heading, which is not repeated.

XML from dynamic Server-side database

To download XML from a dynamic server-side database requires changing the SRC attribute of the HTML file to the program generating the XML. To execute Portfolio.asp requires:

<xml ID="xmlDoc2" SRC="Portfolio.asp"></xml>

The ASP code to generate XML data identical to that of the Portfolio.xml file is:

User Interaction