XML HTTP 请求

从服务器获取 XML 数据

Web 应用程序通常需要从服务器动态加载 XML 数据，而无需刷新整个页面。这通常使用 JavaScript 的网络功能来实现。

现代浏览器中有两种主要机制：较旧的 XMLHttpRequest 对象和较新的 fetch API。

1. fetch API (现代方法)

fetch 提供了一个基于 Promise 的、功能更强大、更灵活的网络请求接口。

主要优势：

• 更简洁、基于 Promise 的语法（使用 then/catch 或 async/await 处理异步操作更简单）。
• 更灵活的请求/响应对象。
• 被认为是发出请求的现代标准。

示例：使用 fetch 获取和解析 XML：

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

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

    // 如有需要，检查内容类型（可选）
    const contentType = response.headers.get('content-type');
    if (!contentType || (!contentType.includes('application/xml') && !contentType.includes('text/xml'))) {
      console.warn(`Expected XML, but received Content-Type: ${contentType}`);
    }

    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

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

    console.log('Successfully fetched and parsed XML:');
    // 现在您可以处理 xmlDoc（例如，提取数据）
    console.log(xmlDoc.documentElement.nodeName); // 打印根元素的名称
    return xmlDoc;

  } catch (error) {
    console.error('Error fetching or parsing XML:', error);
    return null; // 或者适当地处理错误
  }
}

// 用法：
fetchXmlData('/api/data.xml') // 示例 URL
  .then(doc => {
    if (doc) {
      // 对已解析的 XML 文档进行处理
    }
  });

2. XMLHttpRequest 对象 (传统/旧方法)

XMLHttpRequest (XHR) 对象是最初使用 JavaScript 发送异步请求的方式。虽然现在通常更倾向于使用 fetch，但 XHR 仍然得到广泛支持，并在较旧的代码库中或用于 fetch 尚未完全覆盖的功能（如详细的进度事件）中。

核心概念：您创建一个 XHR 对象，配置它 (open)，设置事件处理程序 (onload, onerror)，然后发送请求 (send)。

示例：使用 XMLHttpRequest 获取 XML：

function loadXmlWithXHR(url) {
  const xhr = new XMLHttpRequest();

  // 配置请求：GET 方法，URL，异步 true
  xhr.open('GET', url, true);

  // 设置事件处理程序，用于请求成功完成时
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 检查 responseXML 是否可用（浏览器已解析的 XML）
      if (xhr.responseXML) {
        console.log('Successfully received parsed XML (responseXML):');
        // 处理 xhr.responseXML (它已经是一个 Document 对象)
        console.log(xhr.responseXML.documentElement.nodeName);
      } else {
        // 备用方案：如果 responseXML 为 null，则手动解析 responseText
        console.log('Received XML as text, parsing manually...');
        try {
          const parser = new DOMParser();
          const xmlDoc = parser.parseFromString(xhr.responseText, "application/xml");
          const parseError = xmlDoc.querySelector('parsererror');
          if (parseError) {
             throw new Error('Parsing error');
          }
          console.log('Successfully parsed XML from text:');
          console.log(xmlDoc.documentElement.nodeName);
        } catch (e) {
           console.error('Error parsing XML text:', e);
        }
      }
    } else {
      // 处理 HTTP 错误（例如 404 Not Found，500 Server Error）
      console.error('Request failed with status:', xhr.status, xhr.statusText);
    }
  };

  // 设置事件处理程序，用于网络错误（例如连接被拒绝）
  xhr.onerror = function() {
    console.error('Network error occurred');
  };

  // 发送请求
  xhr.send();
}

// 用法：
loadXmlWithXHR('/api/data.xml'); // 示例 URL

XHR 的要点：

• 事件驱动：依赖 onload 和 onerror 回调函数。
• xhr.status：包含 HTTP 状态码。
• xhr.responseXML：如果服务器发送了正确的 Content-Type（如 application/xml 或 text/xml），浏览器可能会自动将响应解析为可在此处访问的 DOM Document。即使 XML 正确，这也可能有时为 null，因此通常需要备用解析 xhr.responseText。
• xhr.responseText：始终包含响应体作为字符串。

常见用例

获取 XML 数据用于：

• 加载配置文件或设置文件。
• 从传统系统或 SOAP Web 服务检索数据。
• 动态更新网页的某些部分，而无需完全重新加载 (AJAX - Asynchronous JavaScript and XML，尽管现在 JSON 在此模式下更常用)。
• 获取 RSS 或 Atom 等数据源。