使用javascript访问XML数据的实例


Posted in Javascript onDecember 27, 2006

在网络浏览器软件中,可以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节点以识别文档已经包含的选项。

文档中的<body>标准有一个onLoad属性,这一属性能够使得网页调用getDataNext()而初始化。这一功能可用于从XML文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。

向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onClick事件而调用getDataNext() 或者getDataPrev(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。

Javascript 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
JQuery 入门实例1
Jun 25 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue监听scroll的坑的解决方法
Sep 07 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 #Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 #Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 #Javascript
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 #Javascript
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 #Javascript
提高 DHTML 页面性能
Dec 25 #Javascript
js中几种去掉字串左右空格的方法
Dec 25 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
Yii rules常用规则示例
2016/03/15 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
js实现无缝轮播图
2020/03/09 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python+mysql实现教务管理系统
2019/02/20 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
蟋蟀的住宅教学反思
2014/04/26 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
教室标语大全
2014/06/21 职场文书
学生自我评语
2015/01/04 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书