您好,欢迎访问一九零五行业门户网

使用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节点以识别文档已经包含的选项。
文档中的6c04bd5ca3fcae76e30b72ad730ca86d标准有一个onload属性,这一属性能够使得网页调用getdatanext()而初始化。这一功能可用于从xml文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。
向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onclick事件而调用getdatanext() 或者getdataprev(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。
以上就是使用javascript访问xml数据的内容。
其它类似信息

推荐信息