XML 解析器

XML 解析器（客户端）

现代 Web 浏览器内置了从服务器接收或定义为字符串的 XML 文档的解析能力。

解析（Parsing）将基于文本的 XML 文档转换为一个 XML 文档对象模型（DOM）对象。这个 DOM 对象在内存中表示 XML 结构，允许您使用 JavaScript 访问和操作其元素和属性。

解析从服务器获取的 XML 文档

从服务器获取资源（包括 XML 文件）的现代方法是使用 fetch API 结合 async/await 语法。

以下是如何获取 XML 文件（data.xml）并解析它：

async function loadAndParseXML(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // Get the response text
    const xmlText = await response.text();

    // Use DOMParser to parse the text
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    // Check for parsing errors (optional but recommended)
    const parseError = xmlDoc.querySelector('parsererror');
    if (parseError) {
        console.error("Error parsing XML:", parseError);
        throw new Error('Error parsing XML');
    }

    console.log("XML parsed successfully:", xmlDoc);
    // Now you can work with the xmlDoc object
    // Example: Get the root element's tag name
    console.log("Root element:", xmlDoc.documentElement.tagName);

  } catch (error) {
    console.error('Could not fetch or parse XML:', error);
  }
}

// Example usage:
loadAndParseXML('data.xml');

注意：旧的 XMLHttpRequest 对象也可以获取和解析 XML（使用 responseXML），但更推荐使用 fetch，因为它提供了更清晰的基于 Promise 的 API。请避免使用同步的 XMLHttpRequest，因为它会阻塞浏览器。

解析 XML 字符串

如果您的 JavaScript 代码中有一个 XML 内容的字符串，您可以使用 DOMParser 直接解析它：

const xmlString = `
<bookstore>
  <book category="WEB">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
  </book>
</bookstore>
`;

try {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlString, "application/xml");

  // Check for parsing errors
  const parseError = xmlDoc.querySelector('parsererror');
  if (parseError) {
    console.error("Error parsing XML string:", parseError);
    throw new Error('Error parsing XML string');
  }

  console.log("XML string parsed successfully:", xmlDoc);
  // Access data, e.g., the book title
  const title = xmlDoc.querySelector('book > title').textContent;
  console.log("Book Title:", title); // Output: Learning XML

} catch (error) {
  console.error('Could not parse XML string:', error);
}

DOMParser 接口是所有现代浏览器的标准。不再需要针对旧版本 Internet Explorer 的过时方法，如 ActiveXObject("Microsoft.XMLDOM")。

跨域资源共享 (CORS)

出于安全原因，Web 浏览器强制执行同源策略（Same-Origin Policy）。这意味着从 domain-a.com 提供的网页不能直接获取来自 domain-b.com 的资源（如 XML 文件），除非 domain-b.com 明确允许。

这种权限机制称为跨域资源共享（Cross-Origin Resource Sharing，CORS）。如果您需要从不同域获取 XML，托管 XML 文件的服务器必须在其响应中包含适当的 CORS 头部（Header），例如 Access-Control-Allow-Origin。

如果网页和 XML 文件来自同一来源（相同的协议、域和端口），您将不会遇到 CORS 问题。

在 MDN 上了解更多关于 CORS 的信息

使用 XML DOM

将 XML 解析为 xmlDoc 对象后，您可以使用标准的 DOM 方法（类似于您处理 HTML DOM 的方式）来导航和提取数据，例如 getElementById、getElementsByTagName、querySelector、querySelectorAll，访问 textContent、attributes 等。

下一章将更深入地探讨如何从 XML DOM 对象访问数据。