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 ...
随机推荐
- 【神经网络与深度学习】Leveldb的一些具体操作说明
本文转自 http://blog.csdn.net/poweruser5956/article/details/7727325 Leveldb概述 leveldb提供了持久的键值对的存储.key和va ...
- 【VS开发】【图像处理】GigE和USB3 vision选择？
[VS开发][图像处理]GigE和USB3 vision选择? 具体得看你现场的应用吧,如 现场需要的工作距离,网线可达到100m以内,USB3.0一般般的5m以内: GigE双端都有卡扣,保证了与相 ...
- CDH6.2官方文档
文档总览: https://www.cloudera.com/documentation/enterprise/6/6.2.html 官方api: https://www.cloudera.com/d ...
- ef core 动态拼接 条件
var sql = new List<string>(); var sqlparams = new List<string>(); ; foreach (var p in ph ...
- [DS+Algo] 011 哈希
目录 1. hash 函数 2. 哈希表 3. 密码存储 1. hash 函数 关键词 任意长度输入 固定长度输出 特征 理论上输入跟输出并不是一对一 实际使用假定不会出现碰撞或者冲突 常用算法 (M ...
- 使用注解@CrossOrigin解决跨域问题
转一个大兄弟写的贴子,总结得很好,很全面 https://www.cnblogs.com/mmzs/p/9167743.html 作者: 淼淼之森
- http请求跨域问题分析
http请求跨域问题分析 个人认为可能涉及很多http的知识,本人才疏学浅不敢妄自揣测,只是做个笔记为了以后对比理解,从原生fetch说起吧,前提假设有个后端服务,我用express来模拟,如下: v ...
- 03: redis高级
1.1 布隆过滤器 1.布隆过滤器是什么?(判断某个key一定不存在) 1. 本质上布隆过滤器是一种数据结构,比较巧妙的概率型数据结构 2. 特点是高效地插入和查询,可以用来告诉你 “某样东西一定不存 ...
- Gantt与PERT图区别
甘特图也就做进度管理图.他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个线条表示一个任务,任务名称垂直的列在左边列中,图中的线条的起点和终点对应水平轴上的时间,分别表 ...
- Python 集合的各种操作 数学运算 关系操作 增删改查 生成式
# 集合是无序的 是可变的 不能重复 允许数学运算 分散存储 # 创建# collegel = {'哲学','经济学','法学','教育学'}## # {'教育学', '经济学', '法学', '哲学 ...