XML在早期Web服务、RSS订阅、SOAP协议以及部分企业数据接口中仍然常见。与JSON直接对应JavaScript对象不同，XML需要经过DOM解析才能稳定地读取节点、属性和文本。前端拿到响应后如果只依赖字符串截取，遇到标签顺序变化或属性换行时很容易解析错乱。因此，掌握AJAX获取XML以及后续解析流程，对维护旧系统或对接第三方数据源很有帮助。

使用XMLHttpRequest获取XML

XMLHttpRequest对象在处理XML响应时有一个很方便的属性：responseXML。只要服务器返回的Content-Type是text/xml或application/xml，并且响应内容本身是合法XML，responseXML就会自动解析成一个Document对象。后续就能像操作普通DOM一样读取节点。这里有一个容易忽略的细节：如果服务器返回的Content-Type不是XML类型，responseXML可能会是null，即使响应体内容是标准XML。遇到这种情况，可以在send之前调用xhr.overrideMimeType('text/xml')强制浏览器按XML解析。

下面的封装函数展示了完整的请求流程，包括状态码判断、超时控制和响应解析。状态码不能只看readyState，必须同时检查status是否为200。readyState变为4只代表请求完成，不代表HTTP层面成功。

function loadXML(url, callback, errorCallback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.timeout = 8000;
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        const xml = xhr.responseXML;
        if (xml) {
          callback(xml);
        } else {
          errorCallback(new Error('响应不是有效的XML文档'));
        }
      } else {
        errorCallback(new Error('请求失败，状态码：' + xhr.status));
      }
    }
  };
  xhr.ontimeout = function () {
    errorCallback(new Error('请求超时'));
  };
  xhr.send(null);
}

调用loadXML后，回调函数里拿到的就是已经可以遍历的XML Document对象。如果接口返回了部分错误内容，或者在Chrome控制台看到responseXML仍然为null，可以优先检查响应头Content-Type。另一种排查方式是先读取xhr.responseText，再用DOMParser手动解析，这样可以绕开浏览器对Content-Type的判断。

使用fetch与DOMParser解析XML

fetch接口本身没有提供responseXML属性，它的响应对象主要围绕文本、二进制和JSON展开。要处理XML，正确做法是先用response.text()取出完整字符串，再交给DOMParser的parseFromString方法转换成Document。这个方法与XMLHttpRequest的responseXML在解析结果上基本一致，但好处是请求与解析分离，出问题时更容易定位。

fetch的另一个优点是Promise风格，配合async和await可以让代码更直白。下面的函数先检查response.ok，避免404或500响应体里虽然也有内容却被误当成数据源。然后用DOMParser解析，并通过querySelector查找parsererror节点。浏览器解析失败时通常会在文档中插入一个<parsererror>节点，这是判断XML是否合法的常用方式。

async function loadXMLByFetch(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('HTTP错误：' + response.status);
  }
  const text = await response.text();
  const parser = new DOMParser();
  const xml = parser.parseFromString(text, 'application/xml');
  const parseError = xml.querySelector('parsererror');
  if (parseError) {
    throw new Error('XML解析失败');
  }
  return xml;
}

有些接口返回的XML编码不是UTF-8，response.text()默认按UTF-8解码可能出现乱码。如果确定是其他编码，可以先通过response.arrayBuffer()拿到原始二进制，再用TextDecoder指定编码解码。不过现代Web接口多数已经统一UTF-8，只有对接极老系统时才需要额外处理。

提取节点、属性与文本内容

拿到XML Document后，常用的读取方法包括getElementsByTagName、querySelectorAll、getAttribute和textContent。其中getElementsByTagName返回动态HTMLCollection，适合按标签名批量读取；querySelectorAll支持CSS选择器，适合层级更复杂的结构。文本内容建议统一使用textContent，它会自动合并子节点文本，并且不会把HTML片段当作标签解析。

以下示例假设接口返回一个图书列表，每个<book>节点包含title和price子节点，并且book节点带有id属性。代码会遍历所有book节点，把XML片段转换成普通JavaScript对象数组。

function parseBookList(xml) {
  const books = [];
  const items = xml.getElementsByTagName('book');
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    const titleNode = item.getElementsByTagName('title')[0];
    const priceNode = item.getElementsByTagName('price')[0];
    books.push({
      id: item.getAttribute('id'),
      title: titleNode ? titleNode.textContent : '',
      price: priceNode ? Number(priceNode.textContent) : 0
    });
  }
  return books;
}

这里通过索引[0]取第一个匹配子节点，如果结构里可能出现空标签，最好先判断是否存在再读取textContent，避免直接访问null导致报错。属性读取使用getAttribute，而不是点属性访问，因为有些属性名带连字符，点访问会受到限制。对于文本里包含特殊字符的内容，textContent会原样返回，不会进行HTML实体二次转换。

处理命名空间与特殊XML结构

部分XML文档会使用命名空间，例如SOAP协议或某些标准格式。普通getElementsByTagName('price')无法匹配带命名空间的节点，必须使用getElementsByTagNameNS方法。它接收两个参数，第一个是命名空间URI，第二个是本地节点名。即使XML里写的是前缀形式，第二个参数也不用带前缀。

const prices = xml.getElementsByTagNameNS('urn:books', 'price');
for (let i = 0; i < prices.length; i++) {
  console.log(prices[i].textContent);
}

如果XML里使用CDATA包裹内容，例如描述字段中包含HTML代码或尖括号，读取时仍然使用textContent即可，浏览器会自动还原原始文本。不要在读取CDATA时尝试用正则去掉CDATA标记，那样容易破坏数据完整性。完整的XML示例大致如下。

<book id="1001">
  <title>JavaScript高级程序设计</title>
  <price>89.00</price>
  <description><![CDATA[这是一段包含<b>加重</b>标签的文本]]></description>
</book>

对于这种结构，textContent会返回description节点内部的完整字符串，包括原始的尖括号字符。要注意CDATA内部的<b>在解析后不会变成元素节点，而是纯文本的一部分。

错误处理、跨域与调试建议

XML请求最常见的失败原因有三个：HTTP状态码异常、响应体不是合法XML、以及跨域被浏览器拦截。HTTP状态码异常可以在请求层判断；XML不合法可以通过responseXML是否为null或查找parsererror节点判断；跨域问题则需要服务端配置Access-Control-Allow-Origin响应头，或者通过同源代理转发请求。

把请求、超时、解析检测合并到一个函数里，可以让调用方只关心成功后的Document对象。下面是一个比较完整的封装，错误信息会统一抛出到catch中处理。

async function requestXML(url) {
  const controller = new AbortController();
  const timer = setTimeout(function () {
    controller.abort();
  }, 10000);
  try {
    const response = await fetch(url, {
      signal: controller.signal
    });
    if (!response.ok) {
      throw new Error('HTTP状态异常：' + response.status);
    }
    const text = await response.text();
    const parser = new DOMParser();
    const xml = parser.parseFromString(text, 'application/xml');
    if (xml.querySelector('parsererror')) {
      throw new Error('XML格式错误');
    }
    return xml;
  } finally {
    clearTimeout(timer);
  }
}

调试XML接口时，可以先在浏览器地址栏直接访问接口URL，查看原始响应内容。如果浏览器能正常显示树形XML，说明数据本身没问题。前端请求出现responseXML为null时，打开开发者工具查看Network面板中的响应头，确认Content-Type是否包含xml字样。对于结构复杂的XML，可以在控制台打印xml.documentElement.outerHTML，快速查看根节点及子节点结构，再决定使用getElementsByTagName还是querySelectorAll。