XML to HTML
本章讲解如何把 XML 数据显示为 HTML。
在 HTML 中显示 XML 数据
在上一节中，我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。
本例遍历一个 XML 文件 (cd_catalog.xml)，然后把每个 CD 元素显示为一个 HTML 表格行：
<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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script> </body>
</html>
TIY：在 HTML 表格中显示 XML 数据。
例子解释：
- 检测浏览器，然后使用合适的解析器来加载 XML
- 创建一个 HTML 表格（<table border="1">）
- 使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
- 针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据
- 用 </table> 结束表格
如需更多有关 JavaScript 和 XML DOM 的信息，请访问我们的 XML DOM 教程。
跨域访问
出于安全方面的原因，现代的浏览器不允许跨域的访问。
这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。
W3School 的实例所打开的 XML 文件位于 W3School 的域上。
假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。
XML to HTML的更多相关文章
- XStream将java对象转换为xml时，对象字段中的下划线“_”，转换后变成了两个的解决办法
在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...
- .NET Core采用的全新配置系统[9]: 为什么针对XML的支持不够好？如何改进？
物理文件是我们最常用到的原始配置的载体,最佳的配置文件格式主要由三种,它们分别是JSON.XML和INI,对应的配置源类型分别是JsonConfigurationSource.XmlConfigura ...
- WebApi接口 - 响应输出xml和json
格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...
- XML技术之DOM4J解析器
由于DOM技术的解析,存在很多缺陷,比如内存溢出,解析速度慢等问题,所以就出现了DOM4J解析技术,DOM4J技术的出现大大改进了DOM解析技术的缺陷. 使用DOM4J技术解析XML文件的步骤? pu ...
- UWP开发之Mvvmlight实践六：MissingMetadataException解决办法（.Net Native下Default.rd.xml配置问题）
最近完成一款UWP应用,在手机端测试发布版(Release)的时候应用莫名奇妙的强行关闭,而同样的应用包在PC端一点问题都没有,而且Debug版在两个平台都没有问题,唯独手机的Release版有问题. ...
- PHP中遍历XML之SimpleXML
简单来讲述一些XML吧,XML是可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言.XML是当今用于传输数据的两大工具之一,另外一个是json. 我们在PHP中使用XML也是用来传输数据, ...
- Asp.Net 操作XML文件的增删改查 利用GridView
不废话,直接上如何利用Asp.NET操作XML文件,并对其属性进行修改,刚开始的时候,是打算使用JS来控制生成XML文件的,但是最后却是无法创建文件,读取文件则没有使用了 index.aspx 文件 ...
- Mybatis XML配置
Mybatis常用带有禁用缓存的XML配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...
- Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...
- C#反序列化XML异常：在 XML文档(0, 0)中有一个错误“缺少根元素”
Q: 在反序列化 Xml 字符串为 Xml 对象时,抛出如下异常. 即在 XML文档(0, 0)中有一个错误:缺少根元素. A: 首先看下代码: StringBuilder sb = new Stri ...
随机推荐
- dos2unix Linux解决编写脚本出现“%0D
## Linux解决编写脚本出现“%0D”# 安装# yum install -y dos2unix# 然后进行转化一下脚本,将其中的install_mysql.sh换成你的脚本# dos2unix ...
- HDU 1114 Piggy-Bank（动态规划、完全背包）
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- XOR on segment(线段树区间异或更新)
原题传送门 本题大意:给定n个数字和m个操作,操作共有两种,第一种是求解区间l到r上元素的和,第二种是将区间l到r的元素都异或一个x,作为某个位置的新值. 很容易想到线段树维护区间和,但是我们发现,在 ...
- numpy中线性代数用法
numpy中线性代数用法 矩阵乘法 >>> import numpy as np >>> x=np.array([[1,2,3],[4,5,6]]) >> ...
- PHP常见数组排序方法小结
1.简单数组排序 sort() 函数和rsort() 函数: 语法规则: bool sort(array &array [,int sort_flags] bool rsort(array & ...
- 利用lambda和条件表达式构造匿名递归函数
from operator import sub, mul def make_anonymous_factorial(): """Return the value of ...
- SSH自动登录config文件配置
title: SSH自动登录config文件配置 comments: false date: 2019-08-19 19:29:13 description: 更方便的 ssh 操作??? categ ...
- lnmp1.4 nginx配置thinkphp5
vhost/xxx.conf配置图,重点是红色框框 研究了两三天 ,至此thinkphp5 路由,隐藏index.php全部解决 感谢网友的分享:http://blog.csdn.net/gaoxiu ...
- js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class
https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...
- 在django项目中，单独运行python文件
在from models import * 上面加上以下代码 import os; os.environ.setdefault("DJANGO_SETTINGS_MODULE", ...