JS解析XML一般分为两个步骤：获取XML文档和解析XML文档。获取XML文档可以使用Ajax方式从服务器获取，也可以使用XMLHttpRequest对象主动发起请求。解析XML文档则可以使用DOM方式和SAX方式。DOM方式将XML文档转化为一棵树形结构，可以使用js的DOM操作方法访问XML文档中的各个元素和属性，非常方便。SAX方式则逐行读取XML文档，遇到元素或属性时触发事件，适合于处理大型XML文件或需要忽略部分信息的情况。
下面以获取XML文档并使用DOM方式解析XML文档为例，详细讲解一下JS解析XML的实现代码。
步骤一：获取XML文档
Ajax方式
使用Ajax方式获取XML文档需要兼容不同浏览器的XMLHttp对象。具体实现代码如下：
function loadXMLDoc(url) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+、Firefox、Chrome、Opera和Safari
xmlhttp = new XMLHttpRequest();
} else {
// IE6、IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var xmlDoc = xmlhttp.responseXML;
parseXML(xmlDoc);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
XMLHttpRequest方式
使用XMLHttpRequest方式获取XML文档的代码如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.xml', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var xmlDoc = xhr.responseXML;
parseXML(xmlDoc);
}
};
xhr.send();
步骤二：解析XML文档
解析使用DOM方式
使用DOM方式解析XML文档，需要将XML文档转化为一棵树形结构，可以使用js的DOM方法进行访问。
具体实现代码如下：
function parseXML(xmlDoc) {
var xmlRoot = xmlDoc.documentElement;
// 获取根节点
var name = xmlRoot.nodeName;
// 获取节点名称
var attrs = xmlRoot.attributes;
// 获取节点属性
var children = xmlRoot.childNodes;
// 获取子节点列表
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType == 1) {
// 节点类型为元素节点
var childName = child.nodeName;
var childAttrs = child.attributes;
var grandchildren = child.childNodes;
// ... 具体操作
} else if (child.nodeType == 3) {
// 节点类型为文本节点
var text = child.nodeValue;
// ... 具体操作
}
}
}
解析使用SAX方式
使用SAX方式解析XML文档，需要定义事件处理函数，处理每个元素或属性的事件。
具体实现代码如下：
function parseXML(xmlDoc) {
var parser = new DOMParser();
var xmlStr = new XMLSerializer().serializeToString(xmlDoc);
// 将XML文档转化为字符串
var parser = sax.parser(true);
parser.onerror = function(err) {
console.error(err);
};
// 错误处理事件
parser.onopentag = function(node) {
// 元素节点开始事件
console.log("Element start: " + node.name);
};
parser.onclosetag = function(node) {
// 元素节点结束事件
console.log("Element end: " + node.name);
};
parser.onattribute = function(attr) {
// 属性节点事件
console.log("Attribute: " + attr.name + " = " + attr.value);
};
parser.ontext = function(text) {
// 文本节点事件
console.log("Text: " + text);
};
parser.write(xmlStr).close();
}
通过以上两种方式，我们就可以获取XML文档并解析XML文档。其中，Ajax方式适用于简单的XML文档，XMLHttpRequest方式适用于稍微复杂一些的XML文档；DOM方式适用于处理小型XML文档，SAX方式适用于处理大型XML文档或需要忽略部分信息的情况。
下面是一个使用DOM方式解析XML文档的完整示例：
<!doctype html>
<html>
<head>
<title>XML解析示例</title>
<meta charset="utf-8">
<script>
function loadXMLDoc(url) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var xmlDoc = xmlhttp.responseXML;
parseXML(xmlDoc);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function parseXML(xmlDoc) {
var xmlRoot = xmlDoc.documentElement;
var name = xmlRoot.nodeName;
console.log("节点名称：", name);
var attrs = xmlRoot.attributes;
for (var i = 0; i < attrs.length; i++) {
console.log("属性名称：" + attrs[i].name + "，属性值：" + attrs[i].value);
}
var children = xmlRoot.childNodes;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType == 1) {
var childName = child.nodeName;
console.log("子节点名称：", childName);
var childAttrs = child.attributes;
for (var j = 0; j < childAttrs.length; j++) {
console.log("子节点属性名称：" + childAttrs[j].name + "，属性值：" + childAttrs[j].value);
}
var grandchildren = child.childNodes;
for (var j = 0; j < grandchildren.length; j++) {
var grandchild = grandchildren[j];
if (grandchild.nodeType == 1) {
console.log("孙子节点名称：", grandchild.nodeName);
} else if (grandchild.nodeType == 3) {
console.log("文本节点：", grandchild.nodeValue.trim());
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="获取XML文档" onclick="loadXMLDoc('example.xml')">
</body>
</html>
其中，example.xml文档内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<bookstore category="web" location="Beijing">
<book id="001" language="Chinese">
<title>HTML5 Programming</title>
<author>Zhang San</author>
<price>50</price>
</book>
<book id="002" language="English">
<title>CSS3 Handbook</title>
<author>Li Si</author>
<price>60</price>
</book>
</bookstore>
运行html文件，点击按钮获取XML文档，控制台输出结果如下：
节点名称： bookstore
属性名称：category，属性值：web
属性名称：location，属性值：Beijing
子节点名称： book
子节点属性名称：id，属性值：001
子节点属性名称：language，属性值：Chinese
孙子节点名称： title
文本节点： HTML5 Programming
孙子节点名称： author
文本节点： Zhang San
孙子节点名称： price
文本节点： 50
子节点名称： book
子节点属性名称：id，属性值：002
子节点属性名称：language，属性值：English
孙子节点名称： title
文本节点： CSS3 Handbook
孙子节点名称： author
文本节点： Li Si
孙子节点名称： price
文本节点： 60
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS解析XML的实现代码 - Python技术站
微信扫一扫 
支付宝扫一扫 