JS解析XML文件和XML字符串详解

本篇攻略旨在介绍Javascript在解析XML文件和XML字符串时所需的方法和技巧。

XML是什么？

XML（Extensible Markup Language）是一种标记语言。它类似于HTML，但用途不同。HTML被用于显示数据，而XML被用于存储和传输数据。

XML是一种被设计用来传输及存储数据的中立性语言，它可以被任何计算机，任何应用程序，甚至是人类读懂。它具有良好的结构化特性，易于扩展。

解析XML文件

无论是服务器中的XML文件，或者是客户端的XML文件，解析XML文件的方法都是相同的。在Javascript中，XMLHttpRequest对象是用来向服务器请求XML文件数据的。然后需要使用DOM（Document Object Model）来穿件XML文档的结构，以便于读取和修改其中的数据。

其基本过程如下：

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1. 打开文件，发送请求

xhr.open('GET', '文件名.xml', true);
xhr.send();

1. 监听readyState属性和onreadystatechange事件

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        //解析XML文件
    }
};

1. 解析XML文件

var xmlDoc = xhr.responseXML;

1. 读取XML数据

var root = xmlDoc.documentElement; //根节点
var childNodes = root.childNodes; //所有子节点集合

一个完整的解析XML文件的示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.xml', true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var xmlDoc = xhr.responseXML;
        var root = xmlDoc.documentElement;
        var childNodes = root.childNodes;
        for(var i = 0; i < childNodes.length; i++) {
            var node = childNodes[i];
            if(node.nodeType === 1) {
                console.log(node.nodeName);
            }
        }
    }
};

解析XML字符串

解析XML字符串同样需要使用DOM来创建XML文档的结构，进而读取其中的数据。

解析XML字符串的方法如下：

1. 创建DOMParser对象

var parser = new DOMParser();

1. 解析XML字符串

var xmlDoc = parser.parseFromString(string,'text/xml');

1. 读取XML数据

var root = xmlDoc.documentElement; //根节点
var childNodes = root.childNodes; //所有子节点集合

一个完整的解析XML字符串的示例代码如下：

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString,'text/xml');
var root = xmlDoc.documentElement;
var childNodes = root.childNodes;
for(var i = 0; i < childNodes.length; i++) {
    var node = childNodes[i];
    if(node.nodeType === 1) {
        console.log(node.nodeName);
    }
}

总结

通过以上两种方法，我们可以方便的解析XML文件和XML字符串，并且实现以后我们还可以根据需要进一步修改XML数据。