本章讲解如何把 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 数据。

例子解释:

  1. 检测浏览器,然后使用合适的解析器来加载 XML
  2. 创建一个 HTML 表格(<table border="1">)
  3. 使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
  4. 针对每个 CD 节点,把 ARTIST 和 TITLE 中的数据显示为表格数据
  5. 用 </table> 结束表格

如需更多有关 JavaScript 和 XML DOM 的信息,请访问我们的 XML DOM 教程。

跨域访问

出于安全方面的原因,现代的浏览器不允许跨域的访问。

这意味着,网页以及它试图加载的 XML 文件,都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子,则必须把 XML 文件放到自己的服务器上。否则,xmlDoc.load() 将产生错误 "Access is denied"。

XML to HTML的更多相关文章

  1. XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法

            在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...

  2. .NET Core采用的全新配置系统[9]: 为什么针对XML的支持不够好?如何改进?

    物理文件是我们最常用到的原始配置的载体,最佳的配置文件格式主要由三种,它们分别是JSON.XML和INI,对应的配置源类型分别是JsonConfigurationSource.XmlConfigura ...

  3. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

  4. XML技术之DOM4J解析器

    由于DOM技术的解析,存在很多缺陷,比如内存溢出,解析速度慢等问题,所以就出现了DOM4J解析技术,DOM4J技术的出现大大改进了DOM解析技术的缺陷. 使用DOM4J技术解析XML文件的步骤? pu ...

  5. UWP开发之Mvvmlight实践六:MissingMetadataException解决办法(.Net Native下Default.rd.xml配置问题)

    最近完成一款UWP应用,在手机端测试发布版(Release)的时候应用莫名奇妙的强行关闭,而同样的应用包在PC端一点问题都没有,而且Debug版在两个平台都没有问题,唯独手机的Release版有问题. ...

  6. PHP中遍历XML之SimpleXML

    简单来讲述一些XML吧,XML是可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言.XML是当今用于传输数据的两大工具之一,另外一个是json. 我们在PHP中使用XML也是用来传输数据, ...

  7. Asp.Net 操作XML文件的增删改查 利用GridView

    不废话,直接上如何利用Asp.NET操作XML文件,并对其属性进行修改,刚开始的时候,是打算使用JS来控制生成XML文件的,但是最后却是无法创建文件,读取文件则没有使用了 index.aspx 文件 ...

  8. Mybatis XML配置

    Mybatis常用带有禁用缓存的XML配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  9. Drawable实战解析:Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  10. C#反序列化XML异常:在 XML文档(0, 0)中有一个错误“缺少根元素”

    Q: 在反序列化 Xml 字符串为 Xml 对象时,抛出如下异常. 即在 XML文档(0, 0)中有一个错误:缺少根元素. A: 首先看下代码: StringBuilder sb = new Stri ...

随机推荐

  1. MySQL数据库常用引擎

    在MySQL数据库中,常用的引擎主要就是2个:Innodb和MyIASM. 首先: 1.简单介绍这两种引擎,以及该如何去选择.2.这两种引擎所使用的数据结构是什么. 1. a.Innodb引擎,Inn ...

  2. PTA(Basic Level)1031.查验身份证

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  3. String,StringBuffer,StringBulider 三者的区别

    1.String 是字符串常量,StringBuffer 和StringBuilder 是字符串变量. 2.运行速度 StringBuilder > StringBuffer > Stri ...

  4. Websocket --(1)简介

    最近项目需求提出前台界面实时获取后端数据,也就是数据发生变化后服务端主动通知前端页面,以往都是前端请求服务端.当然了,前人已经为我们想好了解决办法,那就是websocket.至于websocket的介 ...

  5. Linux 下面根据端口号 查询 可执行程序的路劲的方法

    1. 安装上lsof 的包 2. 使用 lsof 命令查看相关进程 lsof -i: 效果为: 3. 根据/proc 的目录查看可执行目录的文件位置 ll /proc/procid # procid ...

  6. java对象 Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念

    PO(persistant object) 持久对象 在 o/r 映射的时候出现的概念,如果没有 o/r 映射,没有这个概念存在了.通常对应数据模型 ( 数据库 ), 本身还有部分业务逻辑的处理.可以 ...

  7. BZOJ 1303 中位数图 题解

    题面 因为所求的是中位数,所以考虑改变原序列.把大于 b 的数全部变为 1,小于 b 的数变为 −1,等于 b 则为 0.问题就变为求存在几个包含 b的区间和为 0 . 根据乘法原理,我们枚举每一个l ...

  8. scrapy之盗墓笔记三级页面爬取

    #今日目标 **scrapy之盗墓笔记三级页面爬取** 今天要爬取的是盗墓笔记小说,由分析该小说的主要内容在三级页面里,故需要我们 一一解析 *代码实现* daomu.py ``` import sc ...

  9. notes-19-05-10

    一 mysql查找一个表中字段相同的数据  2019-05-10 15:51:03   多字段 ) 二 Referer的作用?2019-05-17 10:03:48 (来自网络) 1.防盗链我在www ...

  10. export ,export default 和 import 区别以及用法

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...