在HTML中，JavaScript 提供了几种方法来导入和处理 XML，以下是一个详细的技术教学，说明如何使用 JavaScript 从 XML 文件读取数据。
（图片来源网络，侵删）
步骤1：准备XML文件
确保你有一个格式正确的XML文件。data.xml 的内容可能如下：
<?xml version="1.0" encoding="UTF8"?>
<items>
<item>
<name>Item 1</name>
<description>This is item 1</description>
</item>
<item>
<name>Item 2</name>
<description>This is item 2</description>
</item>
</items>
步骤2：创建HTML结构
在HTML文档中，你需要一个容器来显示XML数据，你可以创建一个列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Load XML with JavaScript</title>
</head>
<body>
<ul id="itemList"></ul>
<script src="loadXml.js"></script>
</body>
</html>
步骤3：编写JavaScript代码
接下来，创建一个名为 loadXml.js 的 JavaScript 文件，用于加载和解析 XML 数据。
使用 XMLHttpRequest 对象
XMLHttpRequest 是传统的方式，用来异步获取 XML 数据。
// loadXml.js
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// IE5/IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", filename, false);
try {
xhttp.send();
} catch (e) {
window.alert("Unable to load file: " + e);
return null;
}
return xhttp.responseXML;
}
var xmlDoc = loadXMLDoc("data.xml");
// 获取元素并添加到HTML中
var itemList = document.getElementById("itemList");
var items = xmlDoc.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var itemName = items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var itemDescription = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var listItem = document.createElement("li");
listItem.textContent = itemName + ": " + itemDescription;
itemList.appendChild(listItem);
}
使用 fetch API
现代浏览器支持 fetch API，它返回的是 Promise 对象，可以更简洁地处理异步操作。
// loadXml.js (使用 fetch API)
function loadXMLDoc(url) {
return fetch(url)
.then(response => response.text())
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"));
}
loadXMLDoc("data.xml").then(xmlDoc => {
var itemList = document.getElementById("itemList");
var items = xmlDoc.getElementsByTagName("item");
Array.from(items).forEach(item => {
var itemName = item.getElementsByTagName("name")[0].childNodes[0].nodeValue;
var itemDescription = item.getElementsByTagName("description")[0].childNodes[0].nodeValue;
var listItem = document.createElement("li");
listItem.textContent = itemName + ": " + itemDescription;
itemList.appendChild(listItem);
});
}).catch(error => {
console.error("Error loading XML:", error);
});
步骤4：运行代码
将HTML文件和JavaScript文件放在同一个目录下，并在浏览器中打开HTML文件，你应该能看到来自XML文件的数据被解析并显示在页面上。
归纳
以上介绍了两种在HTML中使用JavaScript导入和解析XML的方法。XMLHttpRequest 是一种传统方法，而 fetch API 提供了一种更现代的替代方案，根据你的需求和浏览器支持情况选择适合的方法，记得，由于同源策略的限制，如果XML文件位于不同的域，可能会遇到跨域问题，在这种情况下，你可能需要在服务器端配置CORS（CrossOrigin Resource Sharing）策略，或者使用JSONP等其他技术。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/443042.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
