JS读取XML文件示例代码

下面是JS读取XML文件的完整攻略。

一、读取XML文件的基本原理

在JS读取XML文件时，可以通过以下步骤实现：

1. 创建一个 XMLHttpRequest对象；
2. 打开文件并发送请求；
3. 监听请求状态；
4. 接收响应；
5. 解析XML数据。

在以上步骤中，创建XMLHttpRequest对象和打开文件并发送请求的方法是固定的，而解析XML数据则需要使用不同的方法，这取决于具体的数据格式和数据内容。在下面的示例代码中，我们将使用两种常见的XML数据格式来演示如何读取XML文件。

二、示例说明1：读取RSS格式的XML文件

下面是一个读取RSS格式的XML文件的示例代码：

var xhr = new XMLHttpRequest();
xhr.open("GET", "rss.xml", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var xmlDoc = xhr.responseXML;
    var items = xmlDoc.getElementsByTagName("item");
    for (var i = 0; i < items.length; i++) {
      var title = items[i].getElementsByTagName("title")[0].innerHTML;
      var link = items[i].getElementsByTagName("link")[0].innerHTML;
      console.log(title + " - " + link);
    }
  }
};
xhr.send();

以上代码中，首先创建了一个XMLHttpRequest对象，并打开了一个文件，然后设置了一个监听函数，以便在请求状态改变时进行处理。如果请求状态为4 （请求已完成），并且服务器返回的状态码为200（OK），则表示请求成功。接着，将服务器返回的文本数据解析为XML对象，并使用getElementsByTagName方法获取所有的item元素。然后，遍历每一项，使用getElementsByTagName方法获取元素的titile和link标签的内容，并在控制台中输出。

三、示例说明2：读取SVG格式的XML文件

下面是一个读取SVG格式的XML文件的示例代码：

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.svg", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var svgDoc = xhr.responseXML;
    var paths = svgDoc.getElementsByTagName("path");
    for (var i = 0; i < paths.length; i++) {
      var path = paths[i].getAttribute("d");
      console.log(path);
    }
  }
};
xhr.send();

以上代码中，同样是创建了XMLHttpRequest对象，并打开了一个文件，设置了一个监听函数。当请求状态为4时，将服务器返回的数据解析为XML对象，并使用getElementsByTagName方法获取所有的path元素。然后，遍历每一个path元素，使用getAttribute方法获取该元素的d属性的值，并在控制台中输出。

四、总结

以上就是JS读取XML文件的示例代码，通过这些代码示例可以看出，读取XML文件主要利用了XMLHttpRequest对象的方法和XML解析方法。需要注意的是，不同的XML数据格式和数据内容，可能需要使用不同的解析方法，以便正确地获取XML文件中的内容。