使用JavaScript访问XML数据
在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们。
这一网页将传入并运行脚本的初始化。你一定确保order.xml文档与jsxml.html在相同的相同的路径上。
初始化部分将一个新的ActiveX对象例示为MSXML2.DOMDocument.3.0对象类型,然后脚本传入order.xml文档到内存中,并选择所有的/Order/Item节点。我们使用/Order/Item节点以识别文档已经包含的选项。
文档中的标准有一个onLoad属性,这一属性能够使得网页调用getDataNext()而初始化。这一功能可用于从XML文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。
向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onClick事件而调用getDataNext() 或者getDataPrev(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。
1. [代码]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>
2. [代码]order.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>css3教程
<input type="button" value=" << " onClick="getDataPrev();">
<input type="button" value=" >> " onClick="getDataNext();">
</form>
3. [代码]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>http://www.huiyi8.com/css3/
<input type="button" value=" << " onClick="getDataPrev();"> <input type="button" value=" >> " onClick="getDataNext();">
</form>
</body>
</html>
使用JavaScript访问XML数据的更多相关文章
- 以对象的方式来访问xml数据表(三)
怎样以对象的方式来访问xml数据表? 在讲如何具体实现(二)中所说的专门用于访问xml文件的动态链接库之前,我们先来看看这个动态链接库具体要实现什么功能. 动态链接库IXmlDB.dll的功能: 1. ...
- 以对象的方式来访问xml数据表(二)
为什么要以对象的方式来访问xml数据表? 还记得,自己是在一次完成师兄布置的任务时接触到了xml,那时候需要用xml来作为数据文件,保存一个简单的图书管理系统的数据.于是就知道了,可以用xml文件来保 ...
- 以对象的方式来访问xml数据表(一)
所有实例代码都是以C#演示—— 在将如何以对象的方式来访问xml数据表之前,我们先来谈谈如何用xml文件作为数据库吧! 平时在开发一些小的应用的时候,需要一个数据库,这个时候虽然可以用SQL serv ...
- Ajax跨域访问XML数据的另一种方式——使用YQL查询语句
XML数据默认是不能在客户端通过Ajax跨域请求读取的,一般的做法是在服务器上写一个简单的代理程序,将远程XML的数据先读到本地服务器,然后客户端再从本地服务器通过Ajax来请求.由于我们不能对数据源 ...
- 160928、JQuery解析XML数据的demo
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...
- JQuery解析XML数据的几个例子
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...
- 160708、JQuery解析XML数据的demo
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...
- javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
- html中的数据岛:利用DSO和javascript在html中动态加载和浏览xml数据
1.DSO也叫做数据源对象,IE 4.0引入了DSO,在IE 5.0对DSO技术进行很大的扩展.以往如果数据是通过SQL语言对数据库进行查询得到的结果,那么就把它们存放在ADO(ActiveX Dat ...
随机推荐
- tyvj 1061 Mobile Service
线性DP 本题的阶段很明显,就是完成了几个请求,但是信息不足以转移,我们还需要存储三个服务员的位置,但是三个人都存的话会T,我们发现在阶段 i 处,一定有一个服务员在 p[i] 处,所以我们可以只存另 ...
- Chapter 4-5
1.切片对象 sequence[起始索引:结束索引:步进值] 对象身份的比较 is /is not 2.eval()参数是一个字符串, 可以把这个字符串当成表达式来求值. >>>x ...
- AnyChart创建实时仪表
AnyChart创建实时仪表 简述: AnyChart是一款基于Flash和HTML5的图表.仪表控件,所包含的图表类型众多和跨平台以及跨浏览器是该产品的主要特点和优点,另外该产品基于XML文件作为数 ...
- 一个关于 jquery 和 php 的 jsonp 例子(与后台PHP成功通信)
<script> $(document).ready(function(){ $.ajax({ url:'http://localhost/test/jsonp.php', dataTyp ...
- Idea基本讲解、常用配置以及快捷键设置
IDEA官网学习文档:https://www.jetbrains.com/idea/documentation/ IDEA官网入门教程:https://www.jetbrains.com/help/i ...
- TortoiseSVN如何更换或重置登录用户
昨天手贱把svn重新卸载了,再安装后便与之前的项目断了,因为第一次使用这个,也不清楚再怎么登录,还有就是上次是使用别人的账号,也不知道怎么清除别人的账号. 鼠标右键找到settings,点击打开 找到 ...
- esrichina
http://www.esrichina.com.cn/arcgis10.5/index.html#fillback=0100307b617b7b7b363736363039323733627b617 ...
- 总结下JavaWeb应用里正确显示中文需要的设置
1.前台页面需要加的设置: <%@ page contentType="text/html; charset=UTF-8"%> html标签后加上<meta ht ...
- VS2008转VS2013时遇到的问题
最近我们要把DPM进行行人检测嵌入到我们的项目里,需要一个高级版本的VS,于是我们要把2008转换成2013,至于为什么没有换成最高级的版本,可能担心会遇到有更多的麻烦吧,毕竟我们的DPM源码是在20 ...
- Service Mesh vs SideCar
Istio = 微服务框架 + 服务治理 Istio 大幅降低微服务架构下应用程序的开发难度,势必极大的推动微服务的普及.个人乐观估计,随着isito的成熟,微服务开发领域将迎来一次颠覆性的变革.后面 ...