新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   >>中国XML论坛<<     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> XML网站展示,XML源代码,XML编程示例。 本版仅接受原创、转贴、网站展示,具体的技术交流请前往各相关版块。
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 XML源码及示例(仅原创和转载) 』 → 使用JavaScript访问XML数据 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 3879 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: 使用JavaScript访问XML数据 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     cthily 帅哥哟,离线,有人找我吗?
      
      
      等级:大一(高数修炼中)
      文章:24
      积分:177
      门派:XML.ORG.CN
      注册:2006/2/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给cthily发送一个短消息 把cthily加入好友 查看cthily的个人资料 搜索cthily在『 XML源码及示例(仅原创和转载) 』的所有贴子 引用回复这个贴子 回复这个贴子 查看cthily的博客楼主
    发贴心情 使用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">
    <!--
        var i = -1;
        var orderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
     orderDoc.async=false;//不许异步的读取数据
     orderDoc.validateOnParse=false;//不分析有效性
        orderDoc.load("order.xml");
     var items = orderDoc.selectNodes("/Order/Item");
            
        function getNode(doc, xpath) {
          var retval = "";
          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(),这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2006/3/23 16:04:00
     
     cthily 帅哥哟,离线,有人找我吗?
      
      
      等级:大一(高数修炼中)
      文章:24
      积分:177
      门派:XML.ORG.CN
      注册:2006/2/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给cthily发送一个短消息 把cthily加入好友 查看cthily的个人资料 搜索cthily在『 XML源码及示例(仅原创和转载) 』的所有贴子 引用回复这个贴子 回复这个贴子 查看cthily的博客2
    发贴心情 
    当在javascript中利用xml和xsl进行页面,显示时,要注意两个问题:
    1.javascript页面缓存,可能会影响到页面的显示。可以通屏蔽js的方式,而是连接到一个由

    jsp/servlet的生成.js文件(并response.setheader("cache-control","on-cache")等.然后在主页面

    中用javascript连接到该javascript文件。
    即:<script src='sript.jsp' type="jsp/JavaScript"/>即可。
    2.对于使用服务器生成或存在的xml或xsl文件或字符串来显示页面时。必须指定这些文件或字符串读取和分析的方式为:

    doc.async=false;//不许异步的读取数据
    doc.validateOnParse=false;//不分析有效性
    否则会出现在javascript中出现:'完成该操作所需的数据还不可使用'的页面错误。

    比如上面的例子如果运行在localhost下就不会成功,必须改为:
    function change()
    {
    var xmldom=new ActiveXObject("Microsoft.XMLDOM");
    xmldom.async=false; xmldom.validateOnParse=false;
    xmldom.load("ex28.xml");
    var xsldom=new ActiveXObject("Microsoft.XMLDOM");
    xsldom.async=false; xsldom.validateOnParse=false;
    xsldom.load("ex28.xsl");
    document.write(xmldom.transformNode(xsldom));
    }

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2006/3/23 16:05:00
     
     GoogleAdSense
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XML源码及示例(仅原创和转载) 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2025/1/7 0:33:59

    本主题贴数2,分页: [1]

    管理选项修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    3,419.922ms