用JS将xml转化成HTML
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本文介绍将XML转为Html的方法之一—用Javascript输出XML文件。 如果您有一些Javascript基础，这篇文章理解起来可能会比较容易，如果不会Javascript也没关系，按照例子中复制代码也可以完成。 既然我们做的是XML转为Html，那就先需要一个XML文件作为例子。这里我使用的是W3school教程里面的官方例子，一个CD数据XML文件，cd_catalog.xml。 以下是代码片段：
<CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> </CATALOG>
代码片段中依次的意思如下： <CD>代表一个CD内容元素的标签，<Title>是标题，<ATIST>是歌手，<COUNTRY>是所属国家，<COMPANY>是唱片公司，<PRICE>是价格，<YEAR>是出版年份。所有这些构成了一个完整的CD信息。 利用这些数据和Javascript相结合，让Javascript读取XML中的内容并显示出来。Javascript代码如下：
<html>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","shili.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("item_cat");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</td><td>");
}
document.write("</table>");
</script>
</body>
</html>
既然查看页面源代码时显示的仍是Javascript代码，那怎么得到Html呢？如果您使用的是Firefox浏览器就简单了，使用Firebug插件，选中表格区域，复制Html代码，然后在新建网页文件，将代码复制到里面即可。
这段Javascript代码也是w3school的官方代码，不是我的原创。下面向您解释一下这段代码： 1、在Javascript代码的开头到alert这一行，都是在检测浏览器，选择合适的解析方法来加在XML文件。 2、xmlDoc.load("cd_catalog.xml")是读取XML文件。 3、从document.write("<table border='1'>")开始，是创建了一像素边框的表格
。 4、var x=xmlDoc.getElementsByTagName("CD")这行，是利用getElementsByTagName读取CD的节点。 5、之后的<tr>标签开始，都是将ARTIST和TITLE数据显示为独立的单元格。 6、最后用</table>将表格关闭。 至此，利用Javascript将XML文件就显示成了Html的样式。 需要注意的有两点： 1、如果您这时查看源代码，仍然只有Javascript代码。 2、getElementsByTagName里面的名称一定区分大
小写，因为XML文件中的大小写是不同的，很敏感。