HTML读取xml文件的三种办法

刚开始学这里的时候有点懵，以前没学过。但是学安卓动画（Animation）的时候接触过xml文件，总体来说不难。
一般来说xml文件用来储存数据，然后html读取它，主要介绍三种读取方式

利用CSS读取xml文件

//CSS代码：设置xml数据的显示格式students{display:table;border-top-width: 2mm;border-right-width: 1mm;border-bottom-width: 2mm;border-left-width: 1mm;border-collapse:collapse;border-collapse:collapse;margin:auto;margin-top:20px;}
student{display:table-row;line-height:24px;}
sn,name,sex,nation,add,pro{display:table-cell;border:1px solid;padding:6px;
}//xml文件：放置测试数据，以下代码均是基于该xml文件
<?xml version="1.0" encoding="utf-8"?>
<!-- 与css文件对应  -->
<?xml-stylesheet type="text/css" href="cssformat.css"?>
<students><student><sn>20040112</sn><name>张三</name> <sex>男</sex> <nation>汉族</nation>  <add>山东</add>   <pro>计算机</pro></student><student><sn>20040201</sn><name>李四</name> <sex>女</sex> <nation>汉族</nation>  <add>山东</add>   <pro>计算机</pro></student><student><sn>20031514</sn><name>王五</name> <sex>女</sex> <nation>汉族</nation>  <add>山东</add>   <pro>计算机</pro></student><student><sn>20031514</sn><name>赵六</name> <sex>女</sex> <nation>汉族</nation>  <add>山东</add>   <pro>计算机</pro></student>
</students>//html代码：让xml文件的内容显示到html上，src的值与xml文件对应
<iframe src="cssxml.xml" width="500px" height="200px" frameborder="0"></iframe>

因为这种方法用的不多，所以不做详细说明

利用XSLT读取xml文件

首先需要新建一个xslt文件（后缀为.xsl），如果用的Dreamweaver，可以很方便的创建。

xslt文件可以使用html的标签，代码如下：

<!-- 注意DWXMLSource的值为解析目的xml文件 -->
<?xml version="1.0" encoding="utf-8"?><!-- DWXMLSource="cssxml.xml" -->...<!-- 在body里添加以下代码 -->
<table border="1" cellpadding="2" align="center"><caption>studentlist</caption><tr><td>学号</td><td>姓名</td><td>性别</td><td>民族</td><td>籍贯</td><td>专业</td></tr><!-- xsl里的遍历语句，可以与xml文件的内容一一对应 --><xsl:for-each select="students/student"><tr><!-- 与xml文件的标签一一对应 --><td align="center"><xsl:value-of select="sn"/></td><td align="center"><xsl:value-of select="name"/></td><td align="center"><xsl:value-of select="sex"/></td><td align="center"><xsl:value-of select="nation"/></td><td align="center"><xsl:value-of select="add"/></td><td align="center"><xsl:value-of select="pro"/></td></tr></xsl:for-each></table>...

这种方法可能用的也不多，也不做详细解释（吐槽：用的少的比较难，用的多的比较简单）

JS读取xml文件

直接上代码，如下：


...<table border="1" cellpadding="2" align="center"><caption>使用DOM显示XML文档</caption><tr><td>学号</td><td>姓名</td><td>性别</td><td>民族</td><td>籍贯</td><td>专业</td></tr><script type="text/javascript">var isie = true;//所读取xml文件var xmlDoc = getxmlDoc("cssxml.xml");var stuList = xmlDoc.getElementsByTagName("student");for(var i=0;i<stuList.length;i++){document.write("<tr>");var subList = stuList[i].childNodes;for(var j=0;j<subList.length;j++){document.write("<td>"+subList[j].text+"</td>");}document.write("</tr>");}//获取xmlDoc对象，兼容浏览器，参考网上代码function getxmlDoc(xmlFile) {var xmlDoc;if (window.ActiveXObject) {xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IExmlDoc.async = false;xmlDoc.load(xmlFile);}else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐xmlDoc = document.implementation.createDocument('', '', null);xmlDoc.load(xmlFile);}else{ //谷歌var xmlhttp = new window.XMLHttpRequest();xmlhttp.open("GET",xmlFile,false);xmlhttp.send(null);if(xmlhttp.readyState == 4){xmlDoc = xmlhttp.responseXML.documentElement;} }return xmlDoc;}</script></table>...

强调一点，像IE浏览器，执行这段代码会出现提示，如下图所示：

必须点击“允许阻止的内容”才能显示xml的数据

但是最简单最好用最兼容的方法，自然还是jQuery，但是太简单了，有兴趣的可以网上搜搜，资源很多，我就不废话了~~

HTML读取xml文件的三种办法相关推荐

java读取XML文件的四种方式
java读取XML文件的四种方式 Xml代码 <?xml version="1.0" encoding="GB2312"?> <RESULT& ...
C# 读取XML文件的几种方式
在开发过程中,我们有时会需要保存到本地一些结构化数据或者配置信息,这时就可以选择用xml文件.当然xml的用途也不仅仅是这些. 这一篇来谈一谈关于读取xml文件的几种方式: 我们有以下两个文件,一个是 ...
php远程读取几行文件,PHP读取远程文件的三种方法
PHP读取远程文件的三种方法 (2008-08-01 14:29:55) 标签: php 下载远程文件 it HP读取远程文件的几种方法,做采集的第一步就是读取远程文件- 1.file_get_con ...
使用Trados翻译XML文件的三种方法
XML是The Extensible Markup Language(可扩展标识语言)的缩写,是国际组织W3C于2000年10月6日发布的文件标准格式,目前版本是XML1.0版本,因此,现在越来越多的 ...
Python中读取txt文件的三种可行办法
DataTest.txt中的文件内容,文件最后尽量不要留空行,否则有的时候会出现error 1,2,3 4,5,6 7,8,9 第一种方式:使用 csv.reader()读取txt文件 import ...
Java读取xml文件的四种方法
xml文件: Xml代码 <?xml version="1.0" encoding="GB2312"?><RESULT><VALU ...
xml文件的三种解析方式 DOM SAM PULL
<?xml version="1.0" encoding="UTF-8"?> <root><student id="1& ...
C# 读取EXCEL文件的三种经典方法
1.方法一:采用OleDB读取EXCEL文件: 把EXCEL文件当做一个数据源来进行数据的读取操作,实例如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 public D ...
flash air中读取本地文件的三种方法
actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) ? 1 2 3 4 5 var str ...

HTML读取xml文件的三种办法

利用CSS读取xml文件

利用XSLT读取xml文件

JS读取xml文件

HTML读取xml文件的三种办法相关推荐

最新文章

热门文章