JS解析XML|极客笔记

JS解析XML

在前端开发中，经常会涉及到与服务器进行数据交互，获取到的数据通常以XML格式返回。为了能够处理这些XML数据，我们需要使用JavaScript来解析XML数据并提取出我们需要的信息。

什么是XML

XML全称为可扩展标记语言（Extensible Markup Language），是一种用来标记电子文件使其具有结构性的标记语言。与HTML类似，XML同样使用标签来标记数据，但XML的标签是自定义的，可以根据需求灵活定义标签和属性，从而适应不同的数据格式。

一个简单的XML示例如下：

<bookstore>
  <book category="web">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
  <book category="web">
    <title lang="en">Programming JavaScript</title>
    <author>John Doe</author>
    <year>2010</year>
    <price>49.99</price>
  </book>
</bookstore>

使用XMLHttpRequest加载XML数据

在JavaScript中，我们可以使用XMLHttpRequest对象来与服务器进行数据交互，获取XML数据。以下是一个简单的示例代码，用于加载XML数据并解析：

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

function parseXML(xml) {
  var books = xml.getElementsByTagName("book");
  for (var 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 year = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
    var price = books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
    console.log("Title: " + title);
    console.log("Author: " + author);
    console.log("Year: " + year);
    console.log("Price: " + price);
  }
}

在上面的代码中，我们首先使用XMLHttpRequest对象向服务器请求XML数据，然后在onreadystatechange事件中对接收到的XML数据进行解析。解析过程中，我们通过调用getElementsByTagName方法来获取指定标签的所有元素，然后通过childNodes和nodeValue属性来获取元素的文本内容。

使用DOMParser解析XML数据

除了通过XMLHttpRequest对象获取XML数据外，我们还可以使用DOMParser对象来解析XML数据。以下是一个使用DOMParser解析XML数据的示例代码：

var xmlString = "<bookstore><book category='web'><title lang='en'>Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book><book category='web'><title lang='en'>Programming JavaScript</title><author>John Doe</author><year>2010</year><price>49.99</price></book></bookstore>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

parseXML(xmlDoc);

function parseXML(xml) {
  var books = xml.getElementsByTagName("book");
  for (var 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 year = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
    var price = books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
    console.log("Title: " + title);
    console.log("Author: " + author);
    console.log("Year: " + year);
    console.log("Price: " + price);
  }
}

在上面的代码中，我们首先定义了一个XML字符串，然后使用DOMParser对象的parseFromString方法将字符串解析成XML文档对象。接着调用parseXML函数对XML数据进行解析，过程与使用XMLHttpRequest相同。

使用jQuery解析XML数据

在实际项目中，我们经常使用jQuery库来简化对DOM的操作，同样可以使用jQuery来解析XML数据。以下是一个使用jQuery解析XML数据的示例代码：

$.get("books.xml", function(xml) {
  $(xml).find("book").each(function() {
    var title = $(this).find("title").text();
    var author = $(this).find("author").text();
    var year = $(this).find("year").text();
    var price = $(this).find("price").text();
    console.log("Title: " + title);
    console.log("Author: " + author);
    console.log("Year: " + year);
    console.log("Price: " + price);
  });
});

在上面的代码中，我们使用jQuery的$.get方法获取XML数据，然后通过find和each方法遍历XML文档中的所有book元素，再通过find和text方法获取指定元素的文本内容。