Top
首页 > 老文章 > 正文

IE中使用ActiveX功能查找并显示XML数据

在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们
发布时间:2005-11-16 11:08        来源:        作者:Jackie
在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE。微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中。 在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们。 网上冲浪 我们以一个标准的顺序文档而开始,如表A所示。这一文档包含简单的顺序数据以提供网络冲浪者浏览之用。不仅仅为了显示这些数据,我们还提供了一个简单的用户界面,网上冲浪都可以使用这一界面来浏览XML文档。 表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>
我们使用一个网络表单以访问这一XML文档,这一表单将显示SKU,价格,数量,各部分的小计,以及顺序中的每一选项的描述。我们的表单还包含向前和向后浏览选项的按钮。 网页的构成 网页的重要部分是在于表单,我们将使用一个表以易读的方式在屏幕上显示。下面是显示HTML表的代码片段:
<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>
请注意到,我们在表的下面包含了两个按钮,即通过getDataNext()和getDataPrev()函数来浏览前一个和后一个的记录,这也是我们所要讨论的问题。 脚本 其实,我们网页的实质部分不是在于表单,而是在于控制表单的脚本。在我们的脚本中包括四个部分。首先,我们通过载入XML文档而初始化网页。第二部分是导航到下一个记录。第三步是导航到前一个记录。第四部分是从XML文档中提取单一的值。表B显示了我们的网页的全部内容。 表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</h2> 
<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> 
</html>
运行 这一网页将传入并运行脚本的初始化。你一定确保order.xml文档与jsxml.html在相同的相同的路径上。 初始化部分将一个新的ActiveX对象例示为MSXML2.DOMDocument.3.0对象类型,然后脚本传入order.xml文档到内存中,并选择所有的/Order/Item节点。我们使用/Order/Item节点以识别文档已经包含的选项。 文档中的标准有一个onLoad属性,这一属性能够使得网页调用getDataNext()而初始化。这一功能可用于从XML文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。 向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onClick事件而调用getDataNext()或者getDataPrev(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。 (T117)
加载更多

专题访谈

合作站点
stat