异常教程

在 HTML 页面中显示 XML 数据（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，XML（可扩展标记语言）常被用作数据存储和交换的格式，而 HTML 则是构建网页的“画布”。将 XML 数据动态展示在 HTML 页面中，既能发挥 XML 的结构化优势，又能利用 HTML 的交互能力。本文将从零开始，通过循序渐进的讲解，帮助编程初学者和中级开发者掌握这一技能。

XML 的基础概念与 HTML 的协同作用

什么是 XML？

XML 是一种标记语言，其核心功能是描述数据结构。例如：

<book>  
  <title>JavaScript 高级程序设计</title>  
  <author>鸭蛋</author>  
  <price>99.99</price>  
</book>

这里的 <book> 是根元素，<title>、<author> 是子元素，每个元素通过标签包裹数据，形成树状结构。

XML 与 HTML 的区别

  • HTML 是“表现语言”：用于定义网页内容的显示样式（如 <div>、<img>）。
  • XML 是“数据语言”：专注于描述数据内容，不涉及样式或展示逻辑。

两者协同工作的场景包括：从服务器获取 XML 数据，通过 JavaScript 解析后，动态插入到 HTML 元素中。

第一步：静态 XML 数据与 HTML 的直接关联

直接嵌入 XML 的局限性

虽然 XML 可以直接嵌入到 HTML 文件中，但这种方式缺乏动态性：

<!-- 静态 XML 嵌入示例 -->  
<xml>  
  <fruit name="apple" price="5.99"/>  
  <fruit name="banana" price="2.49"/>  
</xml>

但 HTML 无法直接“读取”这些数据，需要借助脚本解析。

初级案例：通过 JavaScript 读取内联 XML

步骤 1：创建 XML 数据

<script type="text/xml" id="fruitData">  
  <fruits>  
    <fruit>  
      <name>Apple</name>  
      <price>5.99</price>  
    </fruit>  
    <fruit>  
      <name>Banana</name>  
      <price>2.49</price>  
    </fruit>  
  </fruits>  
</script>

这里用 <script> 标签包裹 XML 数据，type="text/xml" 告诉浏览器不要执行它。

步骤 2：JavaScript 解析与渲染

// 获取 XML 数据  
const xmlData = document.getElementById('fruitData').textContent;  
const parser = new DOMParser();  
const xmlDoc = parser.parseFromString(xmlData, 'text/xml');  

// 遍历 XML 节点并生成 HTML  
const fruits = xmlDoc.getElementsByTagName('fruit');  
const htmlOutput = document.getElementById('output');  

for (let i = 0; i < fruits.length; i++) {  
  const name = fruits[i].getElementsByTagName('name')[0].textContent;  
  const price = fruits[i].getElementsByTagName('price')[0].textContent;  
  htmlOutput.innerHTML += `<div>${name}: $${price}</div>`;  
}

关键点解析：

  • DOMParser 将 XML 字符串转换为可操作的 DOM 对象。
  • 使用 getElementsByTagName 定位元素，通过 [0] 获取第一个匹配项。
  • 通过 innerHTML 将数据动态插入到 HTML 元素中。

进阶方法：使用 XSLT 转换 XML

什么是 XSLT？

XSLT（可扩展样式表语言转换）是一种将 XML 数据转换为其他格式（如 HTML、PDF）的语言。它类似于 CSS，但功能更强大。

案例：用 XSLT 将 XML 转为 HTML 列表

步骤 1：编写 XSLT 样式表

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
  <xsl:template match="/fruits">  
    <ul>  
      <xsl:for-each select="fruit">  
        <li>  
          <strong>Name:</strong> <xsl:value-of select="name"/>  
          <strong>Price:</strong> $<xsl:value-of select="price"/>  
        </li>  
      </xsl:for-each>  
    </ul>  
  </xsl:template>  
</xsl:stylesheet>

关键点：

  • match="/fruits" 定义根节点的模板。
  • xsl:for-each 遍历每个 <fruit> 节点。
  • xsl:value-of 提取元素的文本内容。

步骤 2：在 HTML 中关联 XML 和 XSLT

<xml id="xmlSource">  
  <fruits>  
    <!-- XML 数据与之前相同 -->  
  </fruits>  
</xml>  

<xsl id="xslSource" type="text/xsl">  
  <!-- XSLT 内容与之前相同 -->  
</xsl>  

<script>  
  const xml = document.getElementById('xmlSource').xml;  
  const xsl = document.getElementById('xslSource').xml;  
  const processor = new XSLTProcessor();  
  processor.importStylesheet(xsl);  
  const result = processor.transformToFragment(xml, document);  
  document.getElementById('output').appendChild(result);  
</script>

注意：XSLT 在现代浏览器中支持良好，但需要通过 XSLTProcessor API 执行转换。

动态加载 XML 数据：AJAX 与异步请求

从服务器获取 XML 数据

实际开发中，XML 数据通常由后端生成并返回。使用 AJAX（Asynchronous JavaScript and XML） 可以实现动态加载：

案例：通过 Fetch API 获取 XML

fetch('data.xml')  
  .then(response => response.text())  
  .then(xmlText => {  
    const parser = new DOMParser();  
    const xmlDoc = parser.parseFromString(xmlText, 'text/xml');  
    // 处理 xmlDoc（与之前方法相同）  
  });

关键点：

  • response.text() 将响应体转为字符串。
  • DOMParser 仍用于解析 XML 内容。

实战案例：构建 XML 数据展示页面

需求：显示书籍列表

步骤 1：定义 XML 数据（books.xml）

<books>  
  <book>  
    <title>你不知道的 JavaScript</title>  
    <author>Kyle Simpson</author>  
    <price>79.99</price>  
  </book>  
  <book>  
    <title>设计模式</title>  
    <author>埃里希·伽默施泰因</author>  
    <price>129.00</price>  
  </book>  
</books>

步骤 2：HTML 结构

<div id="bookList"></div>

步骤 3：JavaScript 动态加载与渲染

fetch('books.xml')  
  .then(response => response.text())  
  .then(xmlText => {  
    const parser = new DOMParser();  
    const xmlDoc = parser.parseFromString(xmlText, 'text/xml');  
    const books = xmlDoc.getElementsByTagName('book');  

    const bookList = document.getElementById('bookList');  
    books.forEach(book => {  
      const title = book.querySelector('title').textContent;  
      const author = book.querySelector('author').textContent;  
      const price = book.querySelector('price').textContent;  

      const bookItem = document.createElement('div');  
      bookItem.innerHTML = `  
        <h3>${title}</h3>  
        <p>作者：${author}</p>  
        <p>价格：$${price}</p>  
      `;  
      bookList.appendChild(bookItem);  
    });  
  })  
  .catch(error => console.error('加载失败:', error));

关键改进点：

  • 使用 querySelector 替代 getElementsByTagName，代码更简洁。
  • 通过 createElement 动态创建 HTML 节点，避免直接拼接 innerHTML 的安全风险。

常见问题与解决方案

问题 1：XML 数据跨域加载失败

当 XML 文件与 HTML 页面不在同一域名下时，浏览器会触发跨域限制。解决方案包括：

  • 在服务器端设置 Access-Control-Allow-Origin 头。
  • 使用 JSONP（需后端支持）。

问题 2：XML 结构复杂时解析困难

对于嵌套层级深的 XML，可借助 XPath 定位节点：

// 定位所有 <book> 节点的 <title>  
const titles = xmlDoc.evaluate(  
  '//book/title',  
  xmlDoc,  
  null,  
  XPathResult.ANY_TYPE,  
  null  
);

XPath 表达式 //book/title 表示“查找所有 <book> 下的 <title>”。

结论

在 HTML 页面中显示 XML 数据，本质上是通过脚本（如 JavaScript）将结构化的 XML 转换为用户可读的 HTML 内容。本文通过静态嵌入、XSLT 转换和动态加载三种方法，展示了从基础到实战的完整流程。

随着技术发展，现代开发更倾向于使用 JSON 替代 XML，但 XML 在特定领域（如配置文件、旧系统集成）仍有重要价值。掌握这一技能，能帮助开发者应对更多复杂场景，例如：

  • 解析 RSS/Atom 馈送
  • 处理遗留系统数据
  • 实现跨平台数据交换

希望本文能为你提供清晰的路径，让 XML 数据在网页中“活”起来！

最新发布

查看更多文章