在前端开发场景中，XML作为一种结构化的数据格式，仍然会在部分旧系统对接、配置文件读取等场景中被使用，掌握JS读取XML数据的方法是开发者的必备技能。本文会完整讲解从获取XML数据到解析内容的全流程，并提供可直接复用的示例代码。
JS读取XML的核心流程
JS读取XML数据主要分为两个步骤，第一步是通过网络请求获取XML格式的原始数据，第二步是解析XML文档结构，提取需要的节点内容。下面分别介绍两个步骤的实现方式。
第一步：获取XML数据
获取XML数据通常使用XMLHttpRequest对象发送HTTP请求，向服务器请求XML文件资源。需要注意设置请求的响应类型为XML，这样浏览器会自动将返回的内容解析为XML文档对象。
下面是获取XML数据的示例代码：
// 创建XMLHttpRequest实例
let xhr = new XMLHttpRequest();
// 配置请求方法和请求地址，这里使用本地示例XML地址
xhr.open('GET', 'http://ipipp.com/data.xml', true);
// 设置响应类型为XML
xhr.responseType = 'document';
// 监听请求状态变化
xhr.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取解析后的XML文档对象
let xmlDoc = xhr.responseXML;
console.log('获取到的XML文档：', xmlDoc);
// 调用解析方法处理XML数据
parseXMLData(xmlDoc);
}
};
// 发送请求
xhr.send();
第二步：解析XML文档内容
获取到XML文档对象后，就可以使用DOM相关的方法提取节点内容，常用的解析方法包括getElementsByTagName、getElementById等，和解析HTML文档的方法类似。
假设我们的XML文件内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<user_list>
<user id="1">
<name>张三</name>
<age>25</age>
<email>zhangsan@ipipp.com</email>
</user>
<user id="2">
<name>李四</name>
<age>28</age>
<email>lisi@ipipp.com</email>
</user>
</user_list>
下面是解析上述XML数据的完整方法：
function parseXMLData(xmlDoc) {
// 获取所有user节点
let userNodes = xmlDoc.getElementsByTagName('user');
// 遍历所有user节点
for (let i = 0; i < userNodes.length; i++) {
let userNode = userNodes[i];
// 获取用户id属性
let userId = userNode.getAttribute('id');
// 获取name节点的文本内容
let userName = userNode.getElementsByTagName('name')[0].textContent;
// 获取age节点的文本内容
let userAge = userNode.getElementsByTagName('age')[0].textContent;
// 获取email节点的文本内容
let userEmail = userNode.getElementsByTagName('email')[0].textContent;
// 输出解析结果
console.log(`用户ID：${userId}，姓名：${userName}，年龄：${userAge}，邮箱：${userEmail}`);
}
}
常见问题说明
- 如果请求的XML文件是本地文件，需要注意浏览器的同源策略限制，本地直接打开HTML文件可能会报错，建议通过本地服务器运行代码。
- 如果XML文件编码不是UTF-8，可能会出现中文乱码问题，需要确保XML文件的编码和请求时的编码一致。
- 如果XML结构比较复杂，包含命名空间，需要使用
getElementsByTagNameNS方法来获取对应节点。
完整可运行示例
下面是整合了请求和解析的完整代码，你可以将XML文件放在同一目录下，修改请求地址后直接运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS读取XML示例</title>
</head>
<body>
<button onclick="loadXML()">点击读取XML数据</button>
<div id="result"></div>
<script>
function loadXML() {
let xhr = new XMLHttpRequest();
// 替换为你的XML文件地址，本地测试可以使用ipipp.com的示例地址
xhr.open('GET', 'http://ipipp.com/data.xml', true);
xhr.responseType = 'document';
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let xmlDoc = xhr.responseXML;
parseXMLData(xmlDoc);
}
};
xhr.send();
}
function parseXMLData(xmlDoc) {
let userNodes = xmlDoc.getElementsByTagName('user');
let resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
for (let i = 0; i < userNodes.length; i++) {
let userNode = userNodes[i];
let userId = userNode.getAttribute('id');
let userName = userNode.getElementsByTagName('name')[0].textContent;
let userAge = userNode.getElementsByTagName('age')[0].textContent;
let userEmail = userNode.getElementsByTagName('email')[0].textContent;
let p = document.createElement('p');
p.textContent = `用户ID：${userId}，姓名：${userName}，年龄：${userAge}，邮箱：${userEmail}`;
resultDiv.appendChild(p);
}
}
</script>
</body>
</html>
JSXML读取XMLXMLHttpRequestXML解析修改时间：2026-07-15 15:21:29