Home > Developer > JavaScript
Internet Explorer (IE) is a standard software in Web browser software. We can see that almost every machine running different versions of Windows (and many other operating systems) uses IE. Microsoft has used ActiveX controls to include IE functions in sophisticated XML processing technology.
In this article, we will describe how to use ActiveX functions in IE to access and parse XML documents, thus allowing Web surfers to manipulate them.
Surfing the internet
We start with A standard document, as shown in table. This document contains simple ordered data for browsing by web surfers. In addition to displaying the data, we also provide a simple user interface that allows web surfing to browse XML documents.
Table A: order. xml
<? Xml version = "1.0"?>
<Order>
<Account> 9900234 </Account>
<Item id = "1">
<SKUs> 1234 </SKU>
<PricePer> 5.95 </PricePer>
<Quantity> 100 </Quantity>
<Subtotal> 595.00 </Subtotal>
<Description> Super Widget Clamp </Description>
</Item>
<Item id = "2">
<SKUs> 6234 </SKU>
<PricePer> 22.00 </PricePer>
<Quantity> 10 </Quantity>
<Subtotal> 220.00 </Subtotal>
<Description> Mighty Foobar Flange </Description>
</Item>
<Item id = "3">
<SKUs> 9982 </SKU>
<PricePer> 2.50 </PricePer>
<Quantity> 1000 </Quantity>
<Subtotal> 2500.00 </Subtotal>
<Description> Deluxe Doohickie </Description>
</Item>
<Item id = "4">
<SKUs> 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. This form displays the SKU, price, quantity, subtotal of each part, and descriptions of each option in the sequence. Our form also contains buttons for the forward and backward browsing options.
Web page Composition
An important part of a webpage is the form. We will use a table to display it on the screen in a readable manner. The following code snippet shows the HTML table:
<Form>
<Table border = "0">
<Tr> <td> SKU </td> <input type = "text" name = "SKU"> </td> </tr>
<Tr> <td> Price </td> <input type = "text" name = "Price"> </td> </tr>
<Tr> <td> Quantity </td> <input type = "text" name = "Quantity"> </td> </tr>
<Tr> <td> Total </td> <input type = "text" name = "Total"> </td> </tr>
<Tr> <td> Description </td> <input type = "text"
Name = "Description"> </td> </tr>
</Table>
<Input type = "button" value = "<" onClick = "getDataPrev ();"> <input
Type = "button" value = ">" onClick = "getDataNext ();">
</Form>
Note that the table contains two buttons: getDataNext () and getDataPrev () to view the previous and next records, this is what we will discuss.
Script
In fact, the essence of our webpage is not the form, but the form control script. There are four parts in our script. First, we initialize the webpage by loading the XML document. The second part is to navigate to the next record. Step 3: navigate to the previous record. The fourth part is to extract a single value from the XML document. Table B shows all the content of our webpage.
Table B: jsxml.html
<Html>
<Head>
<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>
</Head>
<Body onload = "getDataNext ()">
<H2> XML order Database <Form>
<Table border = "0">
<Tr> <td> SKU </td> <input type = "text" name = "SKU"> </td> </tr>
<Tr> <td> Price </td> <input type = "text" name = "Price"> </td> </tr>
<Tr> <td> Quantity </td> <input type = "text"
Name = "Quantity"> </td> </tr>
<Tr> <td> Total </td> <input type = "text" name = "Total"> </td> </tr>
<Tr> <td> Description </td> <input type = "text"
Name = "Description"> </td> </tr>
</Table>
<Input type = "button" value = "<" onClick = "getDataPrev ();"> <input
Type = "button" value = ">" onClick = "getDataNext ();">
</Form>
</Body>
</Html>
Run
This page will pass in and run the script initialization. Make sure that the order.xmldocument and jsxml.html are in the same path.
In the initialization section, a new ActiveX object is displayed as the MSXML2.DOMDocument. 3.0 object type. Then, the script passes in the order. xml document to the memory and selects all the/Order/Item nodes. We use the/Order/Item node to identify the options already included in the document.
The <body> standard in this document has an onLoad attribute, which can be initialized when the webpage calls getDataNext. This function is used to obtain 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 both use the same mechanism. First, call getDataNext () or getDataPrev () in response to the onClick event. These two functions use logical methods to avoid access to our records outside of the document.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
