在Web开发场景中，XML作为结构化的数据交换格式，曾经被广泛应用，很多老接口或者特定业务场景仍会返回XML格式的数据，此时就需要使用JavaScript完成XML的解析与操作，而XMLHttpRequest是早期实现异步请求XML数据的重要工具。
JavaScript解析XML的常用方式
不同浏览器环境提供了不同的XML解析能力，主要分为浏览器原生解析和第三方库解析两种方向，下面分别介绍具体的实现方法。
浏览器原生解析DOMParser
现代浏览器都内置了DOMParser对象，可以直接将XML字符串转换为可操作的XML文档对象，这种方式不需要额外引入依赖，兼容性也较好。
使用DOMParser解析XML的基本步骤如下：
- 创建
DOMParser实例 - 调用
parseFromString方法，传入XML字符串和解析类型text/xml - 获取解析后的XML文档对象，通过DOM API操作节点
下面是具体的代码示例：
// 待解析的XML字符串
const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>1001</id>
<name>张三</name>
<age>25</age>
</user>`;
// 创建DOMParser实例
const parser = new DOMParser();
// 解析XML字符串，得到XML文档对象
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
// 获取根节点
const rootNode = xmlDoc.documentElement;
console.log('根节点名称：', rootNode.nodeName); // 输出 user
// 获取id节点的值
const idNode = xmlDoc.getElementsByTagName('id')[0];
console.log('用户ID：', idNode.textContent); // 输出 1001
// 获取name节点的值
const nameNode = xmlDoc.querySelector('name');
console.log('用户名称：', nameNode.textContent); // 输出 张三
使用第三方库解析
如果需要兼容更老的环境，或者需要处理复杂的XML场景，也可以选择引入专门的XML解析库，比如xmldom，它的API和浏览器原生的DOMParser类似，可以在Node.js环境和老版本浏览器中使用。
JavaScript操作XML的常见操作
解析得到XML文档对象后，就可以像操作普通HTML DOM一样操作XML节点，常见的操作包括读取节点值、修改节点内容、新增节点、删除节点等。
读取节点信息
可以通过getElementsByTagName、querySelector等方法获取指定节点，再通过textContent或者nodeValue获取节点的文本内容，通过getAttribute获取节点的属性值。
示例代码如下：
// 假设已有解析后的xmlDoc对象，XML结构如下：
// <book category="编程">
// <title>JavaScript高级程序设计</title>
// <author>张三</author>
// </book>
// 获取book节点的category属性
const bookNode = xmlDoc.querySelector('book');
const category = bookNode.getAttribute('category');
console.log('书籍分类：', category); // 输出 编程
// 获取title节点的文本
const titleNode = xmlDoc.querySelector('title');
console.log('书籍标题：', titleNode.textContent); // 输出 JavaScript高级程序设计
修改和新增节点
可以通过createElement创建新的XML节点，通过appendChild将节点添加到指定父节点下，通过textContent修改节点的文本内容。
示例代码如下：
// 创建新的price节点
const priceNode = xmlDoc.createElement('price');
// 设置节点文本内容
priceNode.textContent = '89.00';
// 将price节点添加到book节点下
bookNode.appendChild(priceNode);
// 修改author节点的内容
const authorNode = xmlDoc.querySelector('author');
authorNode.textContent = '李四';
// 输出修改后的XML字符串
const serializer = new XMLSerializer();
const newXmlString = serializer.serializeToString(xmlDoc);
console.log('修改后的XML：', newXmlString);
XMLHttpRequest在XML处理中的角色
XMLHttpRequest是浏览器提供的用于发送HTTP请求的原生对象，在XML数据处理流程中，它主要承担异步请求XML数据、接收XML响应的角色，是早期前后端交互获取XML数据的主要方式。
使用XMLHttpRequest请求XML数据
XMLHttpRequest可以设置响应类型为document，此时如果服务端返回的是XML格式的数据，浏览器会自动将响应内容解析为XML文档对象，不需要再手动使用DOMParser解析。
完整的请求示例如下：
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求方法和请求地址，假设接口返回XML格式数据
xhr.open('GET', 'http://ipipp.com/api/user.xml');
// 设置响应类型为document，浏览器会自动解析XML响应
xhr.responseType = 'document';
// 监听请求状态变化
xhr.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 此时xhr.response就是解析后的XML文档对象
const xmlDoc = xhr.response;
const userName = xmlDoc.querySelector('name').textContent;
console.log('获取到的用户名称：', userName);
}
};
// 发送请求
xhr.send();
XMLHttpRequest的核心作用总结
XMLHttpRequest在XML处理流程中的角色可以归纳为以下几点：
- 发起HTTP请求，从服务端获取XML格式的原始数据
- 自动识别响应头的
Content-Type为text/xml或application/xml时，配合responseType为document的设置，自动完成XML的解析工作，减少开发者的手动解析步骤 - 支持异步请求，不会阻塞主线程，保证页面交互的流畅性
注意事项
在使用JavaScript处理XML时，需要注意以下几点：
- 如果XML字符串格式不正确，
DOMParser解析时不会抛出异常，而是会生成一个包含错误信息的XML文档，需要手动判断解析是否成功 - XML是大小写敏感的，节点名称和属性名称的大小写必须和原始XML完全一致，否则无法正确获取节点
- 现在更多场景会使用JSON作为数据交换格式，XML的使用场景逐渐减少，如果是新开发的项目，建议优先选择JSON格式
XMLHttpRequest虽然现在更多被Fetch API替代，但在需要兼容老浏览器或者处理XML自动解析的场景下，仍然有其实用价值。
JavaScriptXMLXMLHttpRequestXML解析XML操作修改时间：2026-06-19 14:51:34