使用javascript访问XML数据的实例

沙河原色彩绘

沙河原色彩绘

2016-02-19 11:25

下面,图老师小编带您去了解一下使用javascript访问XML数据的实例,生活就是不断的发现新事物,get新技能~
在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE。微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中。

在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们。

网上冲浪
我们以一个标准的顺序文档而开始,如表A所示。这一文档包含简单的顺序数据以提供网络冲浪者浏览之用。不仅仅为了显示这些数据,我们还提供了一个简单的用户界面,网上冲浪都可以使用这一界面来浏览XML文档。

表A: order.xml
?xml version="1.0" ?
Order
Account9900234/Account
Item id="1"
  SKU1234/SKU
  PricePer5.95/PricePer
  Quantity100/Quantity
  Subtotal595.00/Subtotal
  DescriptionSuper Widget Clamp/Description
/Item
Item id="2"
  SKU6234/SKU
  PricePer22.00/PricePer
  Quantity10/Quantity
  Subtotal220.00/Subtotal
  DescriptionMighty Foobar Flange/Description
/Item
Item id="3"
  SKU9982/SKU
  PricePer2.50/PricePer
  Quantity1000/Quantity
  Subtotal2500.00/Subtotal
  DescriptionDeluxe Doohickie/Description
/Item
Item id="4"
  SKU3256/SKU
  PricePer389.00/PricePer
  Quantity1/Quantity
  Subtotal389.00/Subtotal
  DescriptionMuckalucket Bucket/Description
/Item
NumberItems1111/NumberItems
Total3704.00/Total
OrderDate07/07/2002/OrderDate
OrderNumber8876/OrderNumber
/Order

我们使用一个网络表单以访问这一XML文档,这一表单将显示SKU,价格,数量,各部分的小计,以及顺序中的每一选项的描述。我们的表单还包含向前和向后浏览选项的按钮。

网页的构成
网页的重要部分是在于表单,我们将使用一个表以易读的方式在屏幕上显示。下面是显示HTML表的代码片段:

form
table border="0"
  trtdSKU/tdtdinput type="text" name="SKU"/td/tr
  trtdPrice/tdtdinput type="text" name="Price"/td/tr
  trtdQuantity/tdtdinput type="text" name="Quantity"/td/tr
  trtdTotal/tdtdinput type="text" name="Total"/td/tr
  trtdDescription/tdtdinput 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()"
h2XML order Database/h2
form
table border="0"
  trtdSKU/tdtdinput type="text" name="SKU"/td/tr
  trtdPrice/tdtdinput type="text" name="Price"/td/tr
  trtdQuantity/tdtdinput type="text"
name="Quantity"/td/tr
  trtdTotal/tdtdinput type="text" name="Total"/td/tr
  trtdDescription/tdtdinput 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(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。
展开更多 50%)
分享

猜你喜欢

使用javascript访问XML数据的实例

Web开发
使用javascript访问XML数据的实例

使用JavaScript访问XML数据

Web开发
使用JavaScript访问XML数据

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript初学者实例教程(12):访问XML节点

Web开发
Javascript初学者实例教程(12):访问XML节点

JavaScript教程:this使用实例

Web开发
JavaScript教程:this使用实例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用Javascript创建XML文件

电脑网络
使用Javascript创建XML文件

ACCESS数据访问页配置实例

编程语言 网络编程
ACCESS数据访问页配置实例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Android控件系列之Button以及Android监听器使用介绍

Android控件系列之Button以及Android监听器使用介绍

Debian安装闭源软件包的方法

Debian安装闭源软件包的方法
下拉加载更多内容 ↓