使用javascript访问XML数据的实例
在网络浏览器软件中，可以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访问XML数据的实例
在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件.可以看到,运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE.微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中. 在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们. 网上冲浪 我们以一个标准的顺序文档而开始,如表A所示.这一文档包含简单的顺序数据以提供网络冲浪者浏览之用.不仅仅为了显示这
-
JavaScript获取XML数据附示例截图
Hot.xml文件 : 复制代码 代码如下: <?xml version="1.0" encoding="gb2312"?> <root> <item> <name>刘亦菲</name> <url>MingXing/LiuYiFei.htm</url> <color>red</color> </item> <item> <name
-
C#自定义处理xml数据类实例
本文实例讲述了C#自定义处理xml数据类.分享给大家供大家参考.具体分析如下: 这个C#类专门用户处理xml数据,可以大大简化xml的操作,类中封装了常用的xml操作,包括打开.读取xml数据,读取.写入节点数据,通过xpath读取节点数据,导出节点数据等等,还可以根据需要自己扩充类的功能. using System; using System.Data; using System.IO; using System.Xml; namespace DotNet.Utilities { public
-
javascript 读取XML数据，在页面中展现、编辑、保存的实现
首先考虑用什么方法做,考虑到三个方式:1.C#拼HTML构造table,修改和保存通过Ajax实现.2.XML+XSL,展现和修改用两个XSL文件来做,Ajax修改.保存XML.3.GridView控件. 经过细致考虑,首先第三方案GridView控件满足不了需求,因为XML格式多样,可能涉及到很多的行.列合并和行.列表头合并.第一方案太麻烦,坐起来是细致活和体力活,需求变动后不好修改.所以选择第二方案.开始学习XPath.XSLT.AJAX用js异步调用一般处理文件(ashx)的方式. 1.实
-
Jquery通过Ajax访问XML数据的小例子
页面js代码 复制代码 代码如下: $.ajax({ url : '...',type : 'POST',dataType : 'xml',error : function(xml) {alert("Error loading XML document" + xml);},success : function(xml) {$(xml).find("X").each(function(i) {alert($(this).attr("Xattr"))
-
JQuery解析XML数据的几个简单实例
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://www.jb51.net/cgi/test.xml', dataType: 'xml', success: function(data
-
使用JDBC4.0操作XML类型的字段(保存获取xml数据)的方法
在 Java SE 6 所提供的诸多新特性和改进中,值得一提的是为 Java 程序提供数据库访问机制的 JDBC 版本升级到了 4.0, 这个以 JSR-221 为代号的版本 , 提供了更加便利的代码编写机制及柔性 , 并且支持更多的数据类型 . JDBC 4.0 的新特性分为下述四类: 1. 驱动及连接管理 2. 异常处理 3. 数据类型支持 4. API 的变化 以上说这么都不是本文要讲的重点内容,下面给大家介绍jdbc4.0操作xml类型数据的方法,具体详情如下所示: 在JDBC4.0推出
-
微信小程序 获取javascript 里的数据
微信小程序 获取javascript 里的数据 wxml如何获取js里的数据 例: wxml里: <text id="twl">{{txt}}</text> 通过上面的{{txt}}可以对应获取js里data下定义的txt的值 js里: data: { txt:{} } 首先在data里定义一个"容器"txt:{},{}内为空代表是从别的地方传值进去,当然{}里也可以直接写数据,如txt:{'123'},上面的wxml获取了就相当于 <
-
JavaScript 解析读取XML文档 实例代码
JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readxml/注:测试的时候需要在网站中测试,iis或apache中,注意不要本地双击运行测试index.htm 复制代码 代码如下: <html> <head> <title>我们</title> <script type="text/javascri
-
Java访问WebService返回XML数据的方法
本文实例讲述了Java访问WebService返回XML数据的方法.分享给大家供大家参考.具体如下: import java.io.IOException; import java.io.InputStream; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import java.io.FileNotFoundException; import java.io