JS实现加载和读取XML文件的方法详解

在Web开发中，我们有时会需要从服务器端获取XML文件，然后在前端进行解析和操作。本文将详细讲解JS实现加载和读取XML文件的方法，以及对XML文件进行解析和操作的技巧。

加载XML文件

加载XML文件主要有两种方式，一种是使用AJAX技术，另一种是使用XMLHttpRequest对象。下面分别进行讲解。

AJAX方式

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var xmlDoc = xhr.responseXML; // 获取XML文档对象
        console.log(xmlDoc);
    }
};
xhr.send();

以上代码通过使用XMLHttpRequest对象向服务器获取XML文件example.xml，然后在获取成功后将其解析为XML文档对象，并输出到控制台。需要注意的是，在使用AJAX方式加载XML文件时，需要将responseType设置为"document"，这样才能获取到XML文档对象。

XMLHttpRequest方式

var xmlDoc;
if (window.ActiveXObject) { // IE浏览器
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.load("example.xml");
} else if (window.XMLHttpRequest) { // 非IE浏览器
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "example.xml", false);
    xhr.overrideMimeType("text/xml");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            xmlDoc = xhr.responseXML; // 获取XML文档对象
            console.log(xmlDoc);
        }
    };
    xhr.send();
}

以上代码通过使用XMLHttpRequest对象向服务器获取XML文件example.xml，然后在获取成功后将其解析为XML文档对象，并输出到控制台。需要注意的是，在使用XMLHttpRequest方式加载XML文件时，需要将overrideMimeType方法设置为"text/xml"，这样才能获取到XML文档对象。

解析XML文件

获取XML文档对象后，我们便可以使用JS的DOM操作技术对其进行解析和操作。下面分别介绍两种常见的XML解析方法，一种是使用DOMParser对象，另一种是使用getElementsByTagName方法。

DOMParser方式

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
var students = xmlDoc.getElementsByTagName("student");
for (var i = 0; i < students.length; i++) {
    console.log(students[i].childNodes[0].nodeValue);
}

以上代码通过使用DOMParser对象将XML字符串解析为XML文档对象，然后获取其中的student元素，并输出其子元素的节点值。需要注意的是，DOMParser对象在IE浏览器中不支持。

getElementsByTagName方式

var students = xmlDoc.getElementsByTagName("student");
for (var i = 0; i < students.length; i++) {
    console.log(students[i].childNodes[0].nodeValue);
}

以上代码直接通过XML文档对象的getElementsByTagName方法获取其中的student元素，并输出其子元素的节点值。需要注意的是，getElementsByTagName方法返回的是一个数组，我们需要遍历该数组获取具体的节点值。

示例说明

以下是一个XML示例文件：

<?xml version="1.0" encoding="UTF-8"?>
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    <student>
        <name>李四</name>
        <age>19</age>
        <gender>女</gender>
    </student>
</students>

以下是一个完整的JS代码，用于加载和读取该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; // 获取XML文档对象

        // 使用DOMParser方式解析XML文件
        var parser = new DOMParser();
        var xmlDoc2 = parser.parseFromString(xhr.responseText, "text/xml");
        var students2 = xmlDoc2.getElementsByTagName("student");
        for (var i = 0; i < students2.length; i++) {
            console.log(students2[i].childNodes[0].nodeValue);
        }        

        // 使用getElementsByTagName方式解析XML文件
        var students = xmlDoc.getElementsByTagName("student");
        for (var i = 0; i < students.length; i++) {
            console.log(students[i].childNodes[0].nodeValue);
        }
    }
};
xhr.send();

以上代码将会在控制台输出如下结果：

张三
18
男
李四
19
女
张三
18
男
李四
19
女

其中，第一组输出为使用DOMParser方式解析XML文件的结果，第二组输出为使用getElementsByTagName方式解析XML文件的结果。