AJAX XML 文件

处理 XML 数据 (传统方式)

虽然 JSON 是现代 Web API 首选的数据格式，但偶尔你可能需要与提供 XML 格式数据的服务进行交互。现代 JavaScript 提供了处理这种情况的方法。

本节将演示如何使用 Fetch API 和浏览器内置的 XML 解析能力来获取和解析 XML。

获取和解析 XML 示例

本例展示如何从服务器获取 XML 文件并将其内容显示在 HTML 表格中。

HTML 结构：

<button id="loadXmlBtn">Load CD Catalog (XML)</button>
<div id="cdInfoContainer"></div>

JavaScript (使用 Fetch 和 DOMParser)：

async function loadXMLData(url) {
  const cdInfoContainer = document.getElementById('cdInfoContainer');
  cdInfoContainer.innerHTML = 'Loading...'; // 提供用户反馈

  try {
    const response = await fetch(url);

    if (!response.ok) { // 检查 HTTP 错误（例如：404 Not Found）
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const xmlText = await response.text(); // 将响应作为文本获取
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    // 检查解析错误
    const parserError = xmlDoc.querySelector('parsererror');
    if (parserError) {
        console.error('XML Parsing Error:', parserError.textContent);
        throw new Error('Failed to parse XML data.');
    }

    const cds = xmlDoc.getElementsByTagName("CD");
    let tableHTML = `<table border='1'>
                       <thead>
                         <tr><th>Title</th><th>Artist</th></tr>
                       </thead>
                       <tbody>`;

    for (let i = 0; i < cds.length; i++) {
      const cd = cds[i];
      // 使用 querySelector 更安全地访问节点并提供默认值
      const titleNode = cd.querySelector("TITLE");
      const artistNode = cd.querySelector("ARTIST");

      const title = titleNode?.textContent || 'N/A'; // 可选链和默认值
      const artist = artistNode?.textContent || 'N/A';

      tableHTML += `<tr><td>${title}</td><td>${artist}</td></tr>`;
    }

    tableHTML += `</tbody></table>`;
    cdInfoContainer.innerHTML = tableHTML;

  } catch (error) {
    console.error('Error fetching or parsing XML:', error);
    cdInfoContainer.innerHTML = `<p style="color: red;">Error loading data: ${error.message}</p>`;
  }
}

document.getElementById('loadXmlBtn').addEventListener('click', () => {
  loadXMLData('cd_catalog.xml'); // 假设 cd_catalog.xml 是 XML 文件
});

示例讲解

事件监听器 (Event Listener)：一个事件监听器被附加到按钮上。点击按钮时，它会调用 loadXMLData 函数。
async function loadXMLData：这个异步函数处理整个过程。
Fetch API：fetch(url) 初始化获取 XML 文件的请求。
错误处理 (Error Handling)：它检查 response.ok 属性以判断是否存在 HTTP 错误，并使用 try...catch 块来捕获网络或其他运行时错误。
获取文本 (Get Text)：response.text() 将响应体读取为字符串。
DOMParser：new DOMParser() 创建一个解析器实例。parser.parseFromString(xmlText, "application/xml") 将 XML 字符串解析成一个 XML 文档对象。
解析错误检查 (Parsing Error Check)：它明确检查浏览器是否在生成的 XML 文档中检测到解析错误。
数据提取 (Data Extraction)：xmlDoc.getElementsByTagName("CD") 获取所有 CD 元素。一个循环遍历它们。
DOM 遍历 (DOM Traversal)：在每个 CD 元素内部使用 querySelector 来查找 TITLE 和 ARTIST 元素。可选链 (?.) 和默认值 (|| 'N/A') 使代码在 XML 节点缺失时更加健壮。
HTML 生成 (HTML Generation)：使用模板字面量 (Template literals) 来构建 HTML 表格字符串，这比字符串拼接更简洁。
更新 UI (Update UI)：cdInfoContainer.innerHTML = tableHTML; 更新页面内容。

XML 文件结构

示例假设有一个 XML 文件 (cd_catalog.xml)，其结构类似于此：

<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>

核心要点：使用 fetch 将数据获取为文本，然后使用 DOMParser 将其转换成可用的 XML 文档对象以提取数据。