xml文件:test.xml
<?xml version="1.0"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> <lastname>Simth</lastname> </note>
html文件:
1.先通过document.implementation.createDocument方法将xml转换成document对象
2.在通过js获取document中的元素并其值
<html> <head> <script type="text/javascript"> function parseXML(){ try{ xmlDoc= new ActiveXObject("Microsoft.XMLDOM"); }catch(e){ try{ xmlDoc= document.implementation.createDocument("","",null); }catch(e){ alert(e.message); return; } } xmlDoc.async = false; xmlDoc.load("../xml/test.xml"); document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue; document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue; document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue; } </script> </head> <body onload="parseXML()"> <h1>W3School.com.cn Internal Note</h1> <p><b>To:</b><span id="to"></span><br/> <b>From:</b><span id="from"></span><br/> <b>Message:</b><span id="message"></span> <p> </body> </html>
=====================JS读取xml文件,并且转成table表格展示==================
先看xml文件:

<?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>张秋丽</stuName> <stuSex>女 </stuSex> <stuAge>18</stuAge> </stuinfo> <stuinfo> <stuName>李文才</stuName> <stuSex>男 </stuSex> <stuAge>31</stuAge> </stuinfo> <stuinfo> <stuName>李斯文</stuName> <stuSex>男 </stuSex> <stuAge>22</stuAge> </stuinfo> <stuinfo> <stuName>马英</stuName> <stuSex>女 </stuSex> <stuAge>25</stuAge> </stuinfo> <stuinfo> <stuName>孙红雷</stuName> <stuSex>男 </stuSex> <stuAge>32</stuAge> </stuinfo> <stuinfo> <stuName>欧阳俊雄</stuName> <stuSex>男 </stuSex> <stuAge>28</stuAge> </stuinfo> <stuinfo> <stuName>江琳</stuName> <stuSex>女 </stuSex> <stuAge>23</stuAge> </stuinfo> <stuinfo> <stuName>小小</stuName> <stuSex>女 </stuSex> <stuAge>22</stuAge> </stuinfo> </student>
aspx页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="获取数据库数据生成XML.aspx.cs" Inherits="Chapter1.获取数据库数据生成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"); //获得指定节点 var divmsg = document.getElementById("xmlMsg"); var msg = "<table border='1' id='mytable'><tr><th>姓名</th><th>性别</th><th>年龄</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读取XML" onclick="ReadXml()" /><br /> <div id="xmlMsg"> </div> </div> </form> </body> </html>
上面的JS操作主要就避免了使用childNodes(因为火狐中有时候会出现childNodes[0]获取到的是" "而不是我们想要的第一个子节点,这个自己可以去试下,反正我是遇到了这种情况),使得可以兼容IE、火狐,其他浏览器我没试。
===========jQuery将读到的xml文件转成了table表格展示========================
地址:https://zhidao.baidu.com/question/581652437.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<
html
xmlns="
<head>
<
title
>qqqun21/777/12</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
<
script
src
=
"jquery-1.8.0.js"
type
=
"text/javascript"
></
script
>
<
script
>
window.onload = function(){
$("div").load("x.xml",function(response,status,xhr){
if(status=="success"){
$("div").html("<
table
border
=
1
></
table
>");
$(response).find("TestCase").each(function(){
var name = $(this).children("Name").text();
var testTime = $(this).children("TestTime").text();
var result = $(this).children("Result").text();
var co = result=="False"?"red":"#fff";
var html = "<
tr
style
=
'Courier New", monospace; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; box-sizing: content-box !important; min-height: auto !important; margin: 0px !important; padding: 0px !important; color: rgb(0, 0, 0) !important;">><
td
>"+name
+"</
td
><
td
>"+testTime+"</
td
><
td
>"+result+"</
td
></
tr
>";
$("table").append(html);
});
}else{
$("div").html("error occured:"+xhr.status+" "+xhr.statusText);
}
})
};
</
script
>
</
head
>
<
body
>
<
div
></
div
>
</
body
>