使用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 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
layui实现三级联动效果
Jul 26 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
解决Vue watch里调用方法的坑
Nov 07 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初学者头痛的十四个问题
2006/07/12 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
js a标签点击事件
2017/03/30 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python中尾递归用法实例详解
2015/04/28 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python实现Linux监控的方法
2019/05/16 Python
python取余运算符知识点详解
2019/06/27 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
PHP笔试题
2012/02/22 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
三峡大坝导游词
2015/01/31 职场文书
现货白银电话营销话术
2015/05/29 职场文书
四年级作文之植物
2019/09/20 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Redis命令处理过程源码解析
2022/02/12 Redis