JavaScript操作XML文件之XML读取方法

一、前言

XML是一种数据传输格式，极为常见。在JavaScript中，通过XMLHttpRequest对象即可访问XML资源。本文重点是通过XML DOM来对XML文件进行读取。

二、XML DOM简介

XML DOM（XML Document Object Model），即XML文档对象模型。在JavaScript中，通过XML DOM可以操作XML文档中的任意节点。XML DOM分为级别，我们在JavaScript中主要使用的是 Level 1。

三、XML DOM的API：

1.创建XML DOM对象

var xmlDoc=new XMLDom();或者var xmlDoc=new ActiveXObject("Microsoft.XMLHTTP");

2.XML DOM对象方法

• loadXML(): 加载XML字符串
• load(): 加载XML文件
• getElementById(): 根据id获取元素
• getElementsByTagName(): 根据标签名获取元素
• createElement(): 创建元素
• createTextNode(): 创建文本节点
• appendChild(): 添加子节点
• removeChild(): 删除子节点
• setAttribute(): 设置节点属性

四、XML文件读取

1. 通过URL读取XML：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
  }
};
xhttp.open("GET", "file.xml", true);
xhttp.send();

function myFunction(xml) {
  var xmlDoc = xml.responseXML;
  console.log(xmlDoc);
}

1. 通过文本读取XML：

var text = "<bookstore><book>" +
    "<title>Harry Potter</title>" +
    "<author>J.K. Rowling</author>" +
    "<year>2005</year>" +
    "</book></bookstore>";

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text,"text/xml");
console.log(xmlDoc);

五、示例说明

我们可以通过以上API，将XML转换成文本或者进行文件读取。对于XML文档的结构，我们在此展示一个简单的样例如下，结构十分清晰：

<?xml version="1.0"?>
<bookstore>
    <book>
        <title>Web前端技术</title>
        <author>张三</author>
        <price>100</price>
    </book>
    <book>
        <title>Java程序设计</title>
        <author>李四</author>
        <price>120</price>
    </book>
    <book>
        <title>Python深度学习</title>
        <author>王五</author>
        <price>80</price>
    </book>
</bookstore>

当XML文件结构很复杂时，我们可以通过循环遍历方式访问节点，操作节点。通常的做法是使用getElementsByTagName()获取指定标签的所有元素，对获取的元素进行访问和操作，如下示例所示：

var xmlDoc = loadXmlDoc("/books.xml");
var books = xmlDoc.getElementsByTagName("book");
for (i = 0; i<books.length;i++) {
    var title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
    var author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
    var price = books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
    console.log(title + ", " + author + ", " + price);
}

六、总结

XML数据交换格式在互联网应用中十分常见，通过JavaScript DOM可以读取XML文件的特定部分、修改XML节点、创造XML文档、排序节点以及在大多数 Web 浏览器中通过 AJAX 进行数据库读取。以上便是完整的XML读取攻略。