javascript 读取XML数据，在页面中展现、编辑、保存的实现

JavaScript 可以通过浏览器内置的 XMLHttpRequest 对象从服务器获取 XML 文件，并将其转化为 JavaScript 中的对象，然后可以在页面中展现、编辑和保存数据。下面是详细的攻略：

1. 读取XML数据

使用XMLHttpRequest对象（也称为 AJAX 技术），可以通过发送请求来获取XML文件。以下是一个获取XML文件的示例：

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  if (this.readyState == 4 && this.status == 200) {
    const xmlDoc = this.responseXML;
    // 对XML文件进行解析和处理
  }
};
xhttp.open("GET", "example.xml", true);
xhttp.send();

这段代码使用了 XMLHttpRequest 对象从名为 "example.xml" 的文件中获取XML数据，并在加载成功后进行了处理。其中，responseXML 属性会将响应体解析为 XML 对象。

2. 展现XML数据

可以使用 JavaScript 将 XML 数据呈现在页面上。以下是一些通常使用的方法：

2.1 使用DOM

DOM是XML解析器的一部分，可以表示XML文档的各个元素和属性。可以使用 JavaScript 操作 DOM 元素并将其添加到页面中。

<!-- HTML文件中包含一个用于显示XML数据的div元素 -->
<div id="xmlData"></div>

// 获取<bookstore>元素
const bookstore = xmlDoc.getElementsByTagName("bookstore")[0];

// 创建表格元素
const table = document.createElement("table");
table.setAttribute("border", "1");

// 将表格添加到div元素中
document.getElementById("xmlData").appendChild(table);

// 遍历<book>元素，并创建表格行和列
const books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  const row = table.insertRow(i);
  const titleCell = row.insertCell(0);
  const authorCell = row.insertCell(1);
  const yearCell = row.insertCell(2);

  titleCell.innerHTML = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  authorCell.innerHTML = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
  yearCell.innerHTML = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
}

以上代码将“bookstore”中的数据添加到了页面上，并将其呈现为表格。

2.2 使用 XSLT

还可以使用 XSLT 将 XML 数据转换为 HTML 或 XHTML。可以使用以下代码将 XML 数据和 XSL 文件合并。

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  if (this.readyState == 4 && this.status == 200) {
    const xslt = this.responseXML;
    const xmlDoc = /* 获取XML数据 */;

    // 创建XSLTProcessor对象
    const xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslt);

    // 将XML数据转换为HTML
    const resultDocument = xsltProcessor.transformToFragment(xmlDoc, document);

    // 将HTML添加到div元素中
    document.getElementById("xmlData").appendChild(resultDocument);
  }
};
xhttp.open("GET", "example.xsl", true);
xhttp.send();

其中，importStylesheet 方法将 XSL 文件导入到 XSLTProcessor 对象中，而 transformToFragment 方法使用传递给它的 XML 数据将 XSL 模板应用于该数据，并生成一个新的 HTML 文档片段。最后，将该 HTML 文档片段添加到页面中。

3. 编辑XML数据

可以使用 JavaScript 编辑 XML 数据。以下是一些示例操作：

3.1 修改元素内容

可以直接通过DOM对象的内容属性（innerHTML）对元素内容进行修改。以下是一个将第一本书的 title 元素内容修改为“新标题”的示例：

const xmlDoc = /* 获取XML数据 */;
const title = xmlDoc.getElementsByTagName("title")[0];
title.innerHTML = "新标题";

3.2 添加新元素

可以使用 createElement 和 appendChild 方法在 XML 文档中添加新元素。以下是一个在“bookstore”中添加一本新书的示例：

const xmlDoc = /* 获取XML数据 */;
const newBook = xmlDoc.createElement("book");

const newTitle = xmlDoc.createElement("title");
const titleText = xmlDoc.createTextNode("新书标题");
newTitle.appendChild(titleText);

const newAuthor = xmlDoc.createElement("author");
const authorText = xmlDoc.createTextNode("新书作者");
newAuthor.appendChild(authorText);

const newYear = xmlDoc.createElement("year");
const yearText = xmlDoc.createTextNode("2021");
newYear.appendChild(yearText);

newBook.appendChild(newTitle);
newBook.appendChild(newAuthor);
newBook.appendChild(newYear);

const bookstore = xmlDoc.getElementsByTagName("bookstore")[0];
bookstore.appendChild(newBook);

以上代码通过创建新元素，并使用 appendChild 将它添加到 bookstore 元素中，实现了在 XML 文档中添加新书的操作。

4. 保存XML数据

可以使用 AJAX 技术将修改后的 XML 数据发送到服务器进行保存。以下是一个将 XML 数据保存到服务器的示例：

const xhttp = new XMLHttpRequest();
xhttp.open("POST", "saveXML.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`xml=${encodeURIComponent(xmlDoc.xml)}`);

其中，xmlDoc.xml 通过序列化方法将 JavaScript 对象序列化为字符串，用于所有现代浏览器和 IE9+。将序列化后的 XML 字符串使用 POST 方法发送到服务器，服务器端可以解析并保存该数据。

至此，整个过程就完成了。读取XML数据、展现XML数据、编辑XML数据、保存XML数据，这四个阶段共同完成了一个基于 Web 端 XML 数据的完整实现。