发新话题
打印

[原创] 在HTML中显示XML数据【兼容IE、Firefxo、Opera】

在HTML中显示XML数据【兼容IE、Firefxo、Opera】

XML确实是个好东西,尤其是现在大部分网站都是生成HTML静态页面的,但是有一些数据是需要动态改变的,频繁更新HTML不是个好办法,这个时候XML就大显身手了,只需要把经常变动的内容保存成XML,在HTML页面上调用就可以,需要时只要更新下XML,不过在HTML中调用XML数据还是有点不怎么容易,数据岛适合大量数据的显示,但是只支持IE,下面这段小代码可以兼容大部分浏览器【附件里面有全部文件】:
这里是要显示XML数据的HTML文件内容【ShowXML.html】:
引用:
<html>
<head>
<scrīpt type="text/javascrīpt">
//页面内容全部载入以后载入XML数据
var xmlDoc
window.onload = function (){
// code for IE
if (window.ActiveXObject){
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.load("Data.xml");
  getXML()
}
// code for Mozilla, etc.
else if (document.implementation && document.implementation.createDocument){
  xmlDoc = document.implementation.createDocument("","",null);
  xmlDoc.load("Data.xml");
  xmlDoc.onload = getXML
}
else{
  alert('您的浏览器不支持JavaScrpit,XML数据将不能显示。');
}
}
function getXML(){
document.getElementById("xmlData_Name").innerHTML = xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue
document.getElementById("xmlData_Email").innerHTML = xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue
document.getElementById("xmlData_Address").innerHTML = xmlDoc.getElementsByTagName("address")[0].firstChild.nodeValue
document.getElementById("xmlData_Address_1").innerHTML = xmlDoc.getElementsByTagName("address")[1].firstChild.nodeValue
}
</scrīpt>
</head>
<body>
<h1>HTML显示XML示例:</h1>
<b>姓名:</b> <span id="xmlData_Name"></span><br />
<b>邮箱:</b> <span id="xmlData_Email"></span><br />
<b>地址:</b> <span id="xmlData_Address"></span>
<hr />
<b>地址:</b> <span id="xmlData_Address_1"></span>
</body>
</html>
下面是XML文件内容【Data.xml】:
引用:
<?xml version="1.0" encoding="gb2312" ?>
<date>
<addr>
<name>紫茉莉.Net</name>
<email>Zimoli.Net@QQ.com</email>
<address><![CDATA[这里是可以是HTML内容,<a href="#">这里是个链接。</a>]]></address>
</addr>
<addr>
<name>流行孤单</name>
<email>Zimoli.Net@Gmail.com</email>
<address><![CDATA[这里是第二条XML记录的内容。</a>]]></address>
</addr>
</date>
[ 本帖最后由 紫茉莉.Net 于 2007-5-24 18:00 编辑 ]
附件: 您所在的用户组无法下载或查看附件
本帖最近评分记录
紫茉莉.Net筹建中,招募人才,请有意高手+QQ1234031

TOP

如果是很多数据的话可以使用数据岛绑定,但是只有IE才支持!~
紫茉莉.Net筹建中,招募人才,请有意高手+QQ1234031

TOP

支持原创。

TOP

:s023:
紫茉莉.Net筹建中,招募人才,请有意高手+QQ1234031

TOP

感谢搂住  支持原创  好东西我转载了

TOP

呵呵,就是个Ajax的基本原理,啥时候所有的浏览器都能支持XML+XSL的XSLT才叫爽呢

TOP

不错

TOP

发新话题