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技术站