使用 JavaScript 读取 XML 文件并将详细信息打印为表格数据

在 Web 开发中，我们常常需要读取 XML 文件并将其中的数据展示给用户。本文将介绍如何使用 JavaScript 读取 XML 文件并将详细信息打印为表格数据。

XML 文件概述

XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。与 HTML 不同，XML 没有固定的元素和属性，因此可以根据具体应用定义任何标记。

我们可以使用以下 XML 文件作为我们的示例：

<?xml version="1.0" encoding="utf-8"?>
<books>
  <book id="1">
    <title>JavaScript: The Good Parts</title>
    <author>Douglas Crockford</author>
    <price>23.99</price>
  </book>
  <book id="2">
    <title>Head First JavaScript Programming</title>
    <author>Eric Freeman, Elisabeth Robson</author>
    <price>54.99</price>
  </book>
  <book id="3">
    <title>JavaScript for Kids: A Playful Introduction to Programming</title>
    <author>Nick Morgan</author>
    <price>14.39</price>
  </book>
</books>

该 XML 文件包含三本书的详细信息，每个书籍有标题、作者和价格。每个书籍都有一个唯一的 ID。

读取 XML 文件

我们可以使用 XMLHttpRequest 对象读取 XML 文件。XMLHttpRequest 对象是 JavaScript 的一个内置对象，用于从 Web 服务器获取数据。以下是一个读取 XML 文件并将其存储到变量中的示例代码：

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

第一行创建了一个新的 XMLHttpRequest 对象。接下来的代码定义了当 readyState 属性的值更改时执行的函数。readyState 属性表示请求的状态，通常有 5 种状态：

• 0: 请求已初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成且响应已准备好

通常，我们只需要检查 readyState 是否为 4 来确定请求是否已完成。如果请求成功，status 将为 200。

第四行将 responseXML 属性的值存储在变量 xml 中。responseXML 属性返回一个表示响应数据的 XMLDocument 对象，包含 XML 文件的所有信息。如果响应的数据不是 XML 格式，则 responseXML 为 null。

最后，我们可以在函数中使用 xml 变量对 XML 文件的数据进行操作。

解析 XML 文件

我们可以使用 JavaScript 的 DOM 方法解析 XML 文件，例如 getElementsByTagName() 和 getAttribute()。以下是一个解析 XML 文件并将其分类为标题、作者和价格的示例代码：

var titles = xml.getElementsByTagName("title");
var authors = xml.getElementsByTagName("author");
var prices = xml.getElementsByTagName("price");

以上代码中，我们使用 getElementsByTagName() 方法获取XML 中所有标题、作者和价格的元素。每个方法返回一个 NodeList 对象，其中包含匹配指定标签名称的所有元素。

有了这些数据，我们可以轻松地打印它们为一个表格。

打印数据为表格

以下是一个将 XML 文件打印为表格的示例代码：

var table = "<table><tr><th>ID</th><th>Title</th><th>Author</th><th>Price</th></tr>";
for (var i = 0; i < titles.length; i++) {
  table += "<tr><td>" + (i + 1) + "</td><td>" + titles[i].childNodes[0].nodeValue + "</td><td>" + authors[i].childNodes[0].nodeValue + "</td><td>" + prices[i].childNodes[0].nodeValue + "</td></tr>";
}
table += "</table>";

document.getElementById("output").innerHTML = table;

以上代码中，我们首先定义一个名为 table 的变量，并将其初始化为表格的开始标记和表头标记。

然后，我们使用一个循环遍历所有的标题元素，并通过 nodeValue 属性获取每个元素的值。nodeValue 属性包含元素的文本内容。注意，我们使用 titles[i].childNodes[0] 获取标题元素的文本内容，而不是直接使用 titles[i]，因为标题元素包含一个文本节点，该节点包含实际的文本。类似地，我们也使用 authors[i].childNodes[0] 和 prices[i].childNodes[0] 来获取作者和价格元素的文本内容。

最后，我们将 table 变量的值设置为具有结束标记的表格，并将整个表格写入 HTML 的某个元素中（在示例代码中为具有 ID output 的元素）。

结论

本文演示了如何使用 JavaScript 读取 XML 文件并将详细信息打印为表格数据。我们可以使用 XMLHttpRequest 对象读取 XML 文件，使用 DOM 方法解析 XML 文件，并将数据打印为表格。这是一个简单而强大的技术，可以让我们轻松地处理和操作 XML 数据。