This article describes how JS reads XML file data and displays data in table form. Share it for your reference, as follows:
Let's look at the xml file first:
<?xml version="1.0" standalone="yes"?><student> <stuinfo> <stuName>Zhang Qiuli</stuName> <stuSex>Female</stuSex> <stuAge>18</stuAge> </stuinfo> <stuinfo> <stuName>Li Wencai</stuName> <stuSex>Male</stuSex> <stuSex>31</stuAge> </stuinfo> <stuinfo> <stuName>Li Siwen</stuName> <stuSex>Male</stuSex> <stuSex>22</stuAge> </stuinfo> <stuinfo> <stuName>Male</stuName> <stuSex>Female</stuSex> <stuAge>25</stuAge> </stuinfo> <stuinfo> <stuName>Sun Honglei</stuName> <stuSex>Male</stuSex> <stuAge>32</stuAge> </stuinfo> <stuinfo> <stuName>Ouyang Junxiong</stuName> <stuSex>Male</stuSex> <stuSex>28</stuAge> </stuinfo> <stuinfo> <stuName>Jiang Lin</stuName> <stuSex>Female</stuSex> <stuSex>Female</stuSex> <stuSex>23</stuAge> </stuinfo> <stuinfo> <stuName>Xiaoxiao</stuName> <stuSex>Female</stuSex> <stuSex>Female</stuSex> <stuAge>22</stuAge> </stuinfo></student>
Aspx page code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="get database data to generate XML.aspx.cs" Inherits="Chapter1.get database data to generate XML" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript"> function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET", dname, false); xhttp.send(""); return xhttp.responseXML; } function ReadXml() { var xmldoc = loadXMLDoc("Student.xml"); //Get the specified node var divmsg = document.getElementById("xmlMsg"); var msg = "<table border='1' id='mytable'><tr><th>Name</th><th>Gender</th><th>Age</th><tr>"; var nodes = xmldoc.getElementsByTagName("stuinfo"); for (var i = 0; i < nodes.length; i++) { msg += "<tr>"; msg += "<td>" + nodes[i].getElementsByTagName("stuName")[0].firstChild.nodeValue + "</td>"; msg += "<td>" + nodes[i].getElementsByTagName("stuSex")[0].firstChild.nodeValue + "</td>"; msg += "<td>" + nodes[i].getElementsByTagName("stuAge")[0].firstChild.nodeValue + "</td>"; msg += "</tr>"; } msg += "</table>"; divmsg.innerHTML = msg; } </script></head><body> <form id="form1" runat="server"> <div> <input type="button" value="JS read XML" onclick="ReadXml()" /><br /> <div id="xmlMsg"> </div> </div> </form></body></html>The above JS operation mainly avoids the use of childNodes (because childrenNodes[0] sometimes appear in Firefox and get "/n" instead of the first child node we want. You can try this myself, but I encountered this situation anyway), making it compatible with IE and Firefox. I haven't tried other browsers.
For more information about JavaScript, please check this site's special topics: "Summary of JavaScript's XML File Operation Skills", "Summary of Ajax Operation Skills in JavaScript", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.