极客教程读取XML文件，并使用JavaScript将详细信息以表格形式打印出来
介绍: 使用JavaScript读取XML文件，并以表格形式打印XML文件的详细信息。我们需要创建一个XML文件，其中包含要打印的数据。XML代表可扩展标记语言，它与HTML非常相似。XML文件的主要目的是用来存储和传输数据。创建XML文件非常简单，因为它使用自定义标签。
先决条件:
- 基本知识 HTML
- 基本知识 CSS
- 基本知识 JavaScript
- 基本知识 XML
方法: 创建XML文件后，我们将编写JavaScript代码来以表格形式从文件中读取和提取数据。因此，我们将发送XMLHttpRequest到服务器，并通过JavaScript从XML文件中获取详细信息。如果请求完成，则响应准备就绪且状态为“OK”，因此我们可以通过使用标签名称获取XML数据。
现在我们将创建两个文件：
1.employee.xml: 存储员工详细信息的XML文件。创建XML文件时我们使用自定义标签，这里我们使用不同的自定义标签，如名字、姓氏、职位、部门等，这些标签根据标签名称存储每个员工的详细信息。
employee.xml
<?xml version="1.0" encoding="utf-8"?>
<employees>
<employee id="be129">
<firstname>Jitendra</firstname>
<lastname>Kumar</lastname>
<title>Engineer</title>
<division>Materials</division>
<building>327</building>
<room>19</room>
</employee>
<employee id="be130">
<firstname>Amit</firstname>
<lastname>Kumar</lastname>
<title>Accountant</title>
<division>Accts Payable</division>
<building>326</building>
<room>14</room>
</employee>
<employee id="be131">
<firstname>Akash</firstname>
<lastname>Kumar</lastname>
<title>Engineering Manager</title>
<division>Materials</division>
<building>327</building>
<room>21</room>
</employee>
<employee id="be132">
<firstname>Aishwarya</firstname>
<lastname>Kulshrestha</lastname>
<title>Engineer</title>
<division>Materials</division>
<building>327</building>
<room>22</room>
</employee>
<employee id="be133">
<firstname>Sachin</firstname>
<lastname>Kumar</lastname>
<title>Engineer</title>
<division>Materials</division>
<building>327</building>
<room>24</room>
</employee>
<employee id="be135">
<firstname>Vikash</firstname>
<lastname>kumar</lastname>
<title>COO</title>
<division>Management</division>
<building>216</building>
<room>26</room>
</employee>
<employee id="be136">
<firstname>Suvam</firstname>
<lastname>Basak</lastname>
<title>Accountant</title>
<division>Accts Payable</division>
<building>326</building>
<room>30</room>
</employee>
<employee id="be135">
<firstname>Abhinav</firstname>
<lastname>kumar</lastname>
<title>COO</title>
<division>Management</division>
<building>216</building>
<room>32</room>
</employee>
<employee id="be131">
<firstname>DhanPal</firstname>
<lastname>Singh</lastname>
<title>Engineering Manager</title>
<division>Materials</division>
<building>327</building>
<room>21</room>
</employee>
</employees>
2.index.html： 此文件包含HTML、CSS和JavaScript代码。我们使用style标签来设置CSS部分，其中我们为表格属性和按钮设置样式，然后使用script标签来编写JavaScript代码并插入employee.xml文件。在loadXMLDoc()函数中，当请求完成后，我们向服务器发送HTTP请求，然后从服务器获取响应并从XML文件中访问数据。在empDetails()函数中，如果我们从服务器获取到响应，则通过使用自定义标签名逐个获取XML文件的数据。要显示此xml文件的数据，只需单击”获取员工详情”按钮，xml文件的数据将以表格形式显示在屏幕上。
index.html
<!DOCTYPE html>
<head>
<title>Reads the XML data using JavaScript</title>
<!-- CSS -->
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #7ce2af
}
th {
background-color: #7c0f65;
color: white;
}
.button {
position: relative;
text-align: center;
padding: 20px;
border: 4px solid rgb(55, 12, 211);
background: rgba(20, 192, 4, 0.5);
color: rgb(230, 36, 78);
outline: none;
border-radius: 30px;
font-size: 30px;
width: 500px;
}
.button:hover {
color: black;
background: white;
}
</style>
<!--JavaScript-->
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// Request finished and response
// is ready and Status is "OK"
if (this.readyState == 4 && this.status == 200) {
empDetails(this);
}
};
// employee.xml is the external xml file
xmlhttp.open("GET", "employee.xml", true);
xmlhttp.send();
}
function empDetails(xml) {
var i;
var xmlDoc = xml.responseXML;
var table =
`<tr><th>Firstname</th><th>Lastname</th>
<th>Title</th><th>Division</th>
<th>Building</th><th>Room</th>
</tr>`;
var x = xmlDoc.getElementsByTagName("employee");
// Start to fetch the data by using TagName
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("firstname")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("lastname")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("title")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("division")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("building")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("room")[0]
.childNodes[0].nodeValue + "</td></tr>";
}
// Print the xml data in table form
document.getElementById("id").innerHTML = table;
}
</script>
</head>
<body>
<center>
<button type="button" class="button"
onclick="loadXMLDoc()">
Get Employees Details
</button>
</center>
<br><br>
<table id="id"></table>
</body>
</html>
运行应用程序的步骤： 要读取XML数据，我们需要在本地服务器上运行此代码。所以，首先我们启动本地服务器，然后打开Chrome浏览器，启动本地主机并查看结果。 **** 点击“获取员工详情”按钮后，我们将以表格形式获取员工详情。
输出：
