XML to HTML：修订间差异
来自站长百科
无编辑摘要 |
无编辑摘要 |
||
| 第28行： | 第28行： | ||
alert('Your browser cannot handle this script');<br> | alert('Your browser cannot handle this script');<br> | ||
}<br> | }<br> | ||
if (xmlDoc!=null)<br> | <nowiki> if (xmlDoc!=null)</nowiki><br> | ||
{<br> | <nowiki>{</nowiki><br> | ||
xmlDoc.load("cd_catalog.xml");<br> | <nowiki>xmlDoc.load("cd_catalog.xml");</nowiki><br> | ||
document.write("<table border='1'>");<br> | <nowiki>document.write("<table border='1'>");</nowiki><br> | ||
var x=xmlDoc.getElementsByTagName("CD");<br> | <nowiki>var x=xmlDoc.getElementsByTagName("CD");</nowiki><br> | ||
for (i=0;i<x.length;i++)<br> | <nowiki>for (i=0;i<x.length;i++)</nowiki><br> | ||
{ <br> | <nowiki>{ </nowiki><br> | ||
document.write("<tr>");<br> | <nowiki>document.write("<tr>");</nowiki><br> | ||
document.write("<td>");<br> | <nowiki>document.write("<td>");</nowiki><br> | ||
document.write(<br> | <nowiki>document.write(</nowiki><br> | ||
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);<br> | <nowiki>x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);</nowiki><br> | ||
document.write("</td>");<br> | <nowiki>document.write("</td>");</nowiki><br> | ||
document.write("<td>");<br> | <nowiki>document.write("<td>");</nowiki><br> | ||
document.write(<br> | <nowiki>document.write(</nowiki><br> | ||
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);<br> | <nowiki>x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);</nowiki><br> | ||
document.write("</td>");<br> | <nowiki>document.write("</td>");</nowiki><br> | ||
document.write("</tr>");<br> | <nowiki>document.write("</tr>");</nowiki><br> | ||
}<br> | }<br> | ||
document.write("</table>");<br> | document.write("</table>");<br> | ||
| 第55行： | 第55行： | ||
例子解释：<br> | 例子解释：<br> | ||
检测浏览器，然后使用合适的解析器来加载 XML <br> | 检测浏览器，然后使用合适的解析器来加载 XML <br> | ||
创建一个 HTML 表格（<table border="1">） <br> | <nowiki>创建一个 HTML 表格（<table border="1">） </nowiki><br> | ||
使用 getElementsByTagName() 来获得所有 XML 的 CD 节点 <br> | 使用 getElementsByTagName() 来获得所有 XML 的 CD 节点 <br> | ||
针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据 <br> | 针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据 <br> | ||
2009年7月29日 (三) 14:10的最新版本
导航: 上一页 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion
在 HTML 中显示数据[ ]
在上一节中，我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。
本例遍历一个 XML 文件 (cd_catalog.xml)，然后把每个 CD 元素显示为一个 HTML 表格行：
<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.load("cd_catalog.xml");
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("");
}
</script>
</body>
</html> TIY：在 HTML 表格中显示 XML 数据。
例子解释：
检测浏览器，然后使用合适的解析器来加载 XML
创建一个 HTML 表格（<table border="1">）
使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据
用 结束表格
如需更多有关 JavaScript 和 XML DOM 的信息，请访问我们的 XML DOM 教程。
跨域访问[ ]
出于安全方面的原因，现代的浏览器不允许跨域的访问。
这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。
W3School 的实例所打开的 XML 文件位于 W3School 的域上。
假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。