In Web browser software, Internet Explorer (IE) is now a standard software. As you can see, almost every machine running a different version of the Windows operating system (and many other operating systems) uses IE. Microsoft has been using ActiveX controls to include IE's functionality in the implementation of sophisticated XML processing technology.
In this article, we'll talk about using ActiveX features in IE to access and parse XML documents, allowing web surfers to manipulate them.
Internet surfing
We start with a standard sequential document, as shown in table A. This document contains simple sequential data to provide web surfers browsing. Not only to show this data, we also provide a simple user interface that can be used to browse XML documents using this interface.
Table A:order.xml
<?xml version= "1.0"?>
<Order>
<Account>9900234</Account>
<item id= "1" >
<SKU>1234</SKU>
<PricePer>5.95</PricePer>
<Quantity>100</Quantity>
<Subtotal>595.00</Subtotal>
<description>super Widget clamp</description>
</Item>
<item id= "2" >
<SKU>6234</SKU>
<PricePer>22.00</PricePer>
<Quantity>10</Quantity>
<Subtotal>220.00</Subtotal>
<description>mighty Foobar flange</description>
</Item>
<item id= "3" >
<SKU>9982</SKU>
<PricePer>2.50</PricePer>
<Quantity>1000</Quantity>
<Subtotal>2500.00</Subtotal>
<description>deluxe doohickie</description>
</Item>
<item id= "4" >
<SKU>3256</SKU>
<PricePer>389.00</PricePer>
<Quantity>1</Quantity>
<Subtotal>389.00</Subtotal>
<description>muckalucket bucket</description>
</Item>
<NumberItems>1111</NumberItems>
<Total>3704.00</Total>
<OrderDate>07/07/2002</OrderDate>
<OrderNumber>8876</OrderNumber>
</Order>
We use a Web form to access this XML document, which shows the SKU, price, quantity, subtotal of each part, and a description of each option in the order. Our form also contains buttons for browsing options forward and backward.
The composition of the Web page
The important part of the Web page is the form, and we will use a table to be displayed on the screen in an easy to read way. The following is a code fragment that displays an HTML table:
<form>
<table border= "0" >
<tr><td>sku</td><td><input type= "text" name= "SKU" ></td></tr>
<tr><td>price</td><td><input type= "text" name= "Price" ></td></tr>
<tr><td>quantity</td><td><input type= "text" name= "Quantity" ></td></tr>
<tr><td>total</td><td><input type= "text" name= "Total" ></td></tr>
<tr><td>description</td><td><input type= "Text"
Name= "Description" ></td></tr>
</table>
<input type= "button" value= "<<" onclick= "Getdataprev ();" > <input
Type= "button" value= ">>" onclick= "Getdatanext ();" >
</form>
Notice that we have two buttons below the table, that is, the Getdatanext () and the Getdataprev () function to view the previous and the last records, which is what we're going to discuss.
Script
In fact, the real part of our web page is not in the form, but in the script that controls the form. There are four parts in our script. First, we initialize the Web page by loading an XML document. The second part is navigating to the next record. The third step is to navigate to the previous record. The forth part is to extract a single value from an XML document. Table B shows the entire contents of our web page.
Table b:jsxml.html
<script language= "JavaScript" >
<!--
Vari =-1;
Varorderdoc = new ActiveXObject ("MSXML2. domdocument.3.0 ");
Orderdoc.load ("Order.xml");
var items = orderdoc.selectnodes ("/order/item");
function GetNode (Doc, XPath) {
Varretval = "";
var value = Doc.selectsinglenode (XPath);
if (value) retval = Value.text;
return retval;
}
function Getdatanext () {
i++;
if (i > items.length-1) i = 0;
Document.forms[0]. Sku.value = GetNode (Orderdoc, "/order/item[" +
i + "]/sku");
Document.forms[0]. Price.value = GetNode (Orderdoc, "/order/item["
+ i + "]/priceper");
Document.forms[0]. Quantity.value = GetNode (Orderdoc,
"/order/item[" + i + "]/quantity");
Document.forms[0]. Total.value = GetNode (Orderdoc, "/order/item["
+ i + "]/subtotal");
Document.forms[0]. Description.value = GetNode (Orderdoc,
"/order/item[" + i + "]/description");
}
function Getdataprev () {
i--;
if (i < 0) i = items.length-1;
Document.forms[0]. Sku.value = GetNode (Orderdoc, "/order/item[" +
i + "]/sku");
Document.forms[0]. Price.value = GetNode (Orderdoc, "/order/item["
+ i + "]/priceper");
Document.forms[0]. Quantity.value = GetNode (Orderdoc,
"/order/item[" + i + "]/quantity");
Document.forms[0]. Total.value = GetNode (Orderdoc, "/order/item["
+ i + "]/subtotal");
Document.forms[0]. Description.value = GetNode (Orderdoc,
"/order/item[" + i + "]/description");
}
-->
</script>
<body onload= "Getdatanext ()" >
<form>
<table border= "0" >
<tr><td>sku</td><td><input type= "text" name= "SKU" ></td></tr>
<tr><td>price</td><td><input type= "text" name= "Price" ></td></tr>
<tr><td>quantity</td><td><input type= "Text"
Name= "Quantity" ></td></tr>
<tr><td>total</td><td><input type= "text" name= "Total" ></td></tr>
<tr><td>description</td><td><input type= "Text"
Name= "Description" ></td></tr>
</table>
<input type= "button" value= "<<" onclick= "Getdataprev ();" > <input
Type= "button" value= ">>" onclick= "Getdatanext ();" >
</form>
</body>
Run
This page will pass in and run the initialization of the script. You must make sure that the Order.xml document is on the same path as the jsxml.html.
The initialization section shows a new ActiveX object as an Msxml2.domdocument.3.0 object type, and then the script passes in the Order.xml document into memory and selects all the/order/item nodes. We use the/order/item node to identify the options that the document already contains.
The <body> standard in the document has an OnLoad attribute that enables the Web page to invoke Getdatanext () and initialize it. This feature can be used to get the next value from the XML document and display it in the form. We use a simple index to access specific options.
The forward (>>) and Backward (<<) buttons all use the same mechanism. Call Getdatanext () or Getdataprev () first in response to the OnClick event, which uses a logical method to avoid accessing our records outside of the document.
