JavaScript怎么用AJAX请求XML数据_技术教程

JavaScript解析XML数据最直接方式是用XMLHttpRequest设responseType="document"获取已解析的XML文档对象，或用fetch配合DOMParser手动解析；关键需服务端返回正确Content-Type及XML编码声明。

JavaScript用AJAX请求XML数据，核心是用 XMLHttpRequest 对象发起请求，并把响应类型设为 "document" 或通过 responseXML 自动解析成 XML 文档对象（Document）。现代写法也可用 fetch，但需手动解析文本为 XML。

用 XMLHttpRequest 获取并解析 XML

这是最直接、兼容性最好的方式。关键点：设置 responseType = "document"，或让浏览器自动识别（靠 Content-Type）。

发送 GET 请求，URL 指向一个返回 text/xml 或 application/xml 的接口（如 data.xml）
监听 load 事件，检查 status === 200
读取 xhr.responseXML —— 它已是解析好的 DOM 文档，可直接用 querySelector、getElementsByTagName 等操作
如果 responseXML 为 null，说明解析失败（常见于 MIME 类型不匹配或 XML 格式错误），此时可退而求其次：用 xhr.responseText + DOMParser 手动解析

示例：

const xhr = new XMLHttpRequest();
xhr.open("GET", "books.xml");
xhr.responseType = "document"; // 建议显式设置
xhr.onload = function() {
  if (xhr.status === 200 && xhr.responseXML) {
    const xml = xhr.responseXML;
    const titles = xml.querySelectorAll("book title");
    titles.forEach(el => console.log(el.textContent));
  } else {
    console.error("XML 加载失败或解析出错");
  }
};
xhr.send();

用 fetch + DOMParser 解析 XML（推荐用于新项目）

fetch 默认不自动解析 XML，但更灵活。适合需要处理跨域、自定义 header 或配合 async/await 的场景。

先用 fetch() 获取响应体为文本（response.text()）
用 new DOMParser().parseFromString(text, "text/xml") 转成 XML 文档
检查解析结果是否有 parseError（IE 不支持，但现代浏览器都行）

示例：

async function loadXML(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    
    const text = await res.text();
    const parser = new DOMParser();
    const xml = parser.parseFromString(text, "text/xml");
    
    // 检查是否解析失败（XML 格式错误时，Chrome/Firefox 会生成 error 元素）
    const parserError = xml.querySelector("parsererror");
    if (parserError) {
      throw new Error("XML 解析错误：" + parserError.textContent);
    }
    
    return xml;
  } catch (err) {
    console.error("加载 XML 失败：", err);
  }
}

// 使用
loadXML("items.xml").then(xml => {
  const items = xml.querySelectorAll("item");
  items.forEach(item => console.log(item.getAttribute("id")));
});