使用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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
利用js实现简易红绿灯
Oct 15 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python 函数中的参数类型
2020/02/11 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
机械设计毕业生自荐信
2014/02/02 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Redis入门基础常用操作命令整理
2022/06/01 Redis