XML 应用

使用 JavaScript 开发简单的 XML 应用

本节演示了如何使用 JavaScript 和 XML DOM 在网页中获取、解析和显示 XML 数据的基本示例。

现代 Web 开发通常使用 JSON 进行数据交换，因为它与 JavaScript 集成更简单，但理解如何处理 XML 仍然很有价值，尤其是在与旧系统、Web 服务（SOAP）或特定基于 XML 的格式（如 RSS、SVG）交互时。

示例 XML 数据（例如：catalog.xml）

假设我们有一个 XML 文件（catalog.xml），其结构如下：

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
  <!-- ... more CD elements ... -->
</CATALOG>

获取和解析 XML

现代 JavaScript 使用 fetch API 获取资源，使用 DOMParser API 将 XML 文本解析为 DOM 对象。

async function loadCatalog() {
  try {
    const response = await fetch('catalog.xml');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    // 现在可以使用 xmlDoc 对象进行操作
    displayFirstCD(xmlDoc);
    setupNavigation(xmlDoc);

  } catch (error) {
    console.error('Error loading or parsing XML:', error);
    document.getElementById('showCD').innerHTML = 'Failed to load catalog.';
  }
}

// 页面加载时调用此函数，例如：
// window.addEventListener('load', loadCatalog);

注意：也可以使用较旧的 XMLHttpRequest 对象，但通常更推荐使用 fetch。

显示第一张 CD 的数据

此函数从已解析的 xmlDoc 中的第一个 <CD> 元素中提取数据，并将其显示在 HTML 元素中（例如，<div id="showCD"></div>）。

function displayCD(xmlDoc, index) {
  const cds = xmlDoc.getElementsByTagName("CD");
  if (index < 0 || index >= cds.length) {
      console.error("Index out of bounds");
      return;
  }

  const cd = cds[index];
  // 使用 textContent 进行更安全、更简单的文本提取
  const title = cd.getElementsByTagName("TITLE")[0]?.textContent ?? 'N/A';
  const artist = cd.getElementsByTagName("ARTIST")[0]?.textContent ?? 'N/A';
  const year = cd.getElementsByTagName("YEAR")[0]?.textContent ?? 'N/A';

  const displayText = `
    **Artist:** ${artist}<br>
    **Title:** ${title}<br>
    **Year:** ${year}
  `;

  document.getElementById("showCD").innerHTML = displayText;
}

function displayFirstCD(xmlDoc) {
    displayCD(xmlDoc, 0);
}

?.（可选链）和 ??（空值合并）运算符提供了对缺失元素或文本内容的鲁棒性。

在 CD 之间导航

要允许用户循环浏览 CD，可以添加“下一张”和“上一张”按钮以及相应的函数。

let currentCDIndex = 0;
let catalogXmlDoc = null; // 存储已解析的文档

function setupNavigation(xmlDoc) {
    catalogXmlDoc = xmlDoc; // 存储供以后使用
    const cds = catalogXmlDoc.getElementsByTagName("CD");

    document.getElementById('prevButton').addEventListener('click', () => {
        if (currentCDIndex > 0) {
            currentCDIndex--;
            displayCD(catalogXmlDoc, currentCDIndex);
        }
    });

    document.getElementById('nextButton').addEventListener('click', () => {
        if (currentCDIndex < cds.length - 1) {
            currentCDIndex++;
            displayCD(catalogXmlDoc, currentCDIndex);
        }
    });

     // 初始显示
     displayCD(catalogXmlDoc, currentCDIndex);
}

// 确保你的 HTML 中有 <button id="prevButton">Previous</button>
// 和 <button id="nextButton">Next</button>。

这个基本结构演示了在 Web 环境中获取、解析和与 XML 数据交互。对于更复杂的交互，探索抽象化 DOM 操作的库或框架可能会有所帮助。

进一步学习 XML DOM API 及其与 JavaScript 的交互将允许开发更复杂的应用。