使用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 学习 - 提高篇
Feb 02 Javascript
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
JavaScript实现缓动动画
Nov 25 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自动加载的两种实现方法
2010/06/21 PHP
php实现的漂亮分页方法
2014/04/17 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python+django实现简单的文件上传
2016/08/17 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Python 如何实现访问者模式
2020/07/28 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
升学宴主持词
2014/04/02 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
高中教师考核方案
2014/05/18 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android