用Javascript,xml parser控制xml文档的逐条显示

最新推荐文章于 2024-04-24 10:45:27 发布

lexfoo

最新推荐文章于 2024-04-24 10:45:27 发布

阅读量1.4k

点赞数

分类专栏： Web 文章标签： xml javascript 文档 mozilla function microsoft

本文链接：https://blog.csdn.net/lexfoo/article/details/615597

版权

Web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

网页设计中有个常见的问题：

如果我有一个清单（比如公司员工资料、酒店资料），我很想把它显示在网页上，但是每个员工有很多资料，最好是在网页上一条一条的显示出来。我该怎么办呢？

当然，我知道这个问题的有无数个解决方案。针对具体的环境不同，完全可以采取不同的方法。

今天在学习XML的一些基础知识，看到IE中有个XML Parser，我试验出来这样一个办法：

例子数据，是这样的一个XML文件,data.xml：

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
        <food>
                <name>豆浆</name>
                <price>￥ 0.5元/碗</price>
                <description>绝对新鲜，白浆、糖浆随您选</description>
        </food>
        <food>
                <name>豆腐脑</name>
                <price>￥ 1.00/碗</price>
                <description>多种调料，附和各种口味的选择</description>
        </food>
        <food>
                <name>包子</name>
                <price>￥2.00元/笼(10个）</price>
                <description>杭州小笼包，美味可口。猪肉大葱馅</description>
        </food>
        <food>
                <name>油条</name>
                <price>￥0.25元/根</price>
                <description>我们的油条就是好吃。香酥可口，松软不腻。</description>
        </food>
</breakfast_menu>

我要解决的问题是：在网页上一条一条的显示，并通过按钮返到上一条和下一条。

于是我利用XML Parser来解决这个问题。当然，Microsoft XML Parser是IE中的，从IE 5.0就已经有了，虽然Netscape, Opera, Mozilla等浏览器里没有这个组件，但是它们也有相应的办法来解决。为了使程序更为通用，我写了下面的Javascript.连同网页的源代码，一起显示在下面：

<html>
<head>
<script type="text/javascript">
var xmlDoc
var msgID = 0;
function loadXML()
{
//load xml file
// code for IE
if (window.ActiveXObject)
{
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async=false;
        xmlDoc.load("data.xml");
        getmessage();
}
// code for Mozilla, etc.
else if (document.implementation && document.implementation.createDocument)
{
        xmlDoc= document.implementation.createDocument("","",null);
        xmlDoc.load("data.xml");
        xmlDoc.οnlοad=getmessage;
}
else
{
        alert('Your browser cannot use this script');
}
}

function getmessage()
{
document.getElementById("name").innerHTML=xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[0].firstChild.nodeValue;
document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[0].firstChild.nodeValue;
}

function getPrevMessage(){
if (msgID > 0){
        document.getElementById("alert").innerHTML="";
        msgID--;
   }else{
        document.getElementById("alert").innerHTML="this is the 1st.";
        return;
   }
document.getElementById("name").innerHTML=xmlDoc.getElementsByTagName("name")[msgID].firstChild.nodeValue;
document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[msgID].firstChild.nodeValue;
document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[msgID].firstChild.nodeValue;
}

function getNextMessage(){
if (msgID < 3){
        document.getElementById("alert").innerHTML="";
        msgID++;
   }else{
        document.getElementById("alert").innerHTML="This is the last. no more";
        return;
   }
document.getElementById("name").innerHTML=xmlDoc.getElementsByTagName("name")[msgID].firstChild.nodeValue;
document.getElementById("price").innerHTML=xmlDoc.getElementsByTagName("price")[msgID].firstChild.nodeValue;
document.getElementById("description").innerHTML=xmlDoc.getElementsByTagName("description")[msgID].firstChild.nodeValue;
}

</script>
</head>

<body οnlοad="loadXML()" bgcolor="yellow">
<h1>Breakfast Menu</h1>
<hr />
<table border="0" width="100%">
<tr>
        <td width="30%"><b>Name:</b></td>
        <td width="70%"><span id="name"></span></td>
</tr>
<tr>
        <td><b>Price:</b></td>
        <td><span id="price"></span></td>
</tr>
<tr>
        <td><b>Description:</b></td>
        <td><span id="description"></span></td>
</tr>
</table>
<hr />
<p><button onClick="getPrevMessage()">Prev</button>
<button onClick="getNextMessage()">Next</button>
</p>
<p><span id="alert" style="color:red"></span></p>
</body>
</html>

如果你想试验一下，可以把这些javascript和html复制到一个文件中test.html，然后把数据复制到data.xml中，用浏览器打开test.html文件试试看。

说明一下：
1),data.xml文件中只有4条数据，因为javascript数组索引是从0开始的，所以在getNextMessage()中，设制msgID最大不超过3. 我还没有试验怎么让javascript在装入xml文件的时候就能能知道有多少个数据条目，所以只能暂时硬编码为4. 以后能解决这个问题时，我再补上。

2),我不觉得这个方法很新奇，但我觉得它很实用。当你下载html和javascript的时候，你看到的源代码非常简单，就这么多。但是通过 Prev / Next按钮，你却能看到更多的数据。换个角度想，如果我xmlDoc.load("data.xml")中，不给data.xml这样的静态源文件，而是一个可以产生xml文件的jsp / asp 动态网页，那么开网页的人能看到html的源代码，却无法看到数据的源代码。这是否可以在一定程度上提高安全性呢？要知道，有些人正在利用程序分析源代码，获取你的数据。你觉得呢？

[未完，尚待整理]

lexfoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Javascript,xml parser控制xml文档的逐条显示

网页设计中有个常见的问题：如果我有一个清单（比如公司员工资料、酒店资料），我很想把它显示在网页上，但是每个员工有很多资料，最好是在网页上一条一条的显示出来。我该怎么办呢？当然，我知道这个问题的有无数个解决方案。针对具体的环境不同，完全可以采取不同的方法。今天在学习XML的一些基础知识，看到IE中有个XML Parser，我试验出来这样一个办法：例子数据，是这样的一个XML文件,data.xml：
复制链接

扫一扫