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 ...
随机推荐
- excel常用公式--关联匹配类
index: 根据位置返回单元格的值. match: 根据单元格的值返回位置. index+match替代vlookup rank:返回一列数字的数字排位.数字的排位是其相对于列表中其他值的大小.
- 在CentOS 8 Linux中安装使用Cockpit服务器管理软件
在本文中,我们将帮助您在CentOS 8服务器中安装Cockpit Web 控制台,以管理和监视本地系统以及网络环境中的Linux服务器.您还将学习如何将远程Linux主机添加到Cockpit并在Ce ...
- hbase的读写过程
hbase的读写过程: hbase的架构: Hbase真实数据hbase真实数据存储在hdfs上,通过配置文件的hbase.rootdir属性可知,文件在/user/hbase/下hdfs dfs - ...
- python_操作MySQL 初解
单文件操作数据库 import random import threading, multiprocessing import time, datetime import pymysql import ...
- Git_命令初解
- CSS 相对定位 绝对定位
css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...
- [转载]Ubuntu环境下检查CPU 的温度
原文地址:https://www.linuxprobe.com/ubuntu-cpu-temperature.html 我们将使用一个GUI工具Psensor,它允许你在Linux中监控硬件温度.用P ...
- wex5 如何写后台BAAS
Data.java: 在class中链接数据源: 配置的numsql数据源 private static final String DATASOURCE_NUMYSQL = "numysql ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- 银联支付SDK集成
下载地址 https://open.unionpay.com/upload/download/Development_kit85427986.rar其实我找了半个小时 也不知道怎么就下载好了 这个我在 ...