html怎么读取xml里的数据
<html>
<head>
<title>html读取xml数据实例一</title>
</head>
<body>
<xml id="xx" src="table.xml">
</xml>
<h3>html读取xml数据实例一</h3>
<table datasrc="#xx" border="1">
<thead> <th>序号</th> <th>区域</th> <th>名字</th> <th>电话</th> <th>QQ</th> <th>email</th>
</thead>
<tr>
<td><span datafld="nid"></span></td>
<td><span datafld="area"></span></td>
<td><span datafld="salename"></span></td>
<td><span datafld="phone"></span></td>
<td><span datafld="qq"></span></td>
<td><span datafld="email"></span></td>
</tr>
</table>
</body>
</html>
xml文件如下：
<?xml version="1.0"?>
<!DOCTYPE tables[
<!ELEMENT tables (table)*>
<!ELEMENT table(nid, area, salename, phone,qq,email)>
<!ELEMENT nid (#PCDATA)>
<!ELEMENT area (#PCDATA)>
<!ELEMENT salename (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT qq (#PCDATA)>
<!ELEMENT email (#PCDATA)>
]>
<tables>
<table>
<nid>1</nid>
<area>广东深圳</area>
<salename>张XX</salename>
<phone>0755-265XXXX1，1382XXX409</phone>
<qq>12XXX88</qq>
<email>TSXXX@c-sct.com</email>
</table>
<table>
<nid>1</nid>
<area>广东深圳</area>
<salename>张XX</salename>
<phone>0755-265XXXX1，1382XXX409</phone>
<qq>12XXX88</qq>
<email>TSXXX@c-sct.com</email>
</table>
<table>
<nid>1</nid>
<area>广东深圳</area>
<salename>张XX</salename>
<phone>0755-265XXXX1，1382XXX409</phone>
<qq>12XXX88</qq>
<email>TSXXX@c-sct.com</email>
</table>
</tables>
javascript 的：
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('A1').innerHTML=xmlhttp.status;
document.getElementById('A2').innerHTML=xmlhttp.statusText;
document.getElementById('A3').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>
xml文件内容如下
?
1
2
3
4
5
6
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
jquery:
<!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>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Display").click(function () {
$("#message").html('');
$.ajax({
type: "GET",
url: "Friend.xml",
dataType: "xml",
success: function (ResponseText) {
var table = "<table border='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
$(ResponseText).find('friend').each(function () {
var first = $(this).find('firstName').text();
var last = $(this).find('lastName').text();
var city = $(this).find('city').text();
table += "<tr><td>" + first + "</td><td>" + last + "</td><td>" + city + "</td></tr>";
})
table += "</table>";
$("#message").append(table);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<label>Display My Friends</label><br />
<input type="button" value="Display" id="Display" />
<div id="message"></div>
</form>
</body>
</html>
[html] view plain copy
<?xml version="1.0" encoding="utf-8" ?>
<friends>
<friend>
<name>
<firstName>Guo</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>Shanghai</province>
<city>PuDong</city>
</address>
</friend>
<friend>
<name>
<firstName>Lei</firstName>
<lastName>Hu</lastName>
</name>
<address>
<province>hubei</province>
<city>xiantao</city>
</address>
</friend>
<friend>
<name>
<firstName>JunWen</firstName>
<lastName>Li</lastName>
</name>
<address>
<province>hubei</province>
<city>wuhan</city>
</address>
</friend>
<friend>
<name>
<firstName>Jinhao</firstName>
<lastName>Liu</lastName>
</name>
<address>
<province>ShanXi</province>
<city>Taiyuan</city>
</address>
</friend>
<friend>
<name>
<firstName>Cheng</firstName>
<lastName>Fang</lastName>
</name>
<address>
<province>GuangDong</province>
<city>GuangZhou</city>
</address>
</friend>
</friends>
我给你举例实现吧
1，自定义一个books.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Edited by XMLSpy? -->
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian </title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
2，定义html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(dname)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load(dname);
return xmlDoc;
}
var xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking ";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
alert(txt.length);
document.write(txt);
</script>
</head>
<body>
<br/>
<div id="test">Easy Cooking </div>
<script type="text/javascript">
var vv = document.getElementById("test").innerHTML;
alert(vv.length);
</script>
</body>
</html>
试一下
<script type='text/javascript'>
loadXML = function(xmlFile){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){
var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
try{
/* document.implementation.createDocument('','',null); 方法的三个参数说明
* 第一个参数是包含文档所使用的命名空间URI的字符串；
* 第二个参数是包含文档根元素名称的字符串；
* 第三个参数是要创建的文档类型（也称为doctype）
*/
xmlDoc = document.implementation.createDocument('','',null);
}catch(e){
}
}
else{
return null;
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
</script>
<head>
<title>html读取xml数据实例一</title>
</head>
<body>
<xml id="xx" src="table.xml">
</xml>
<h3>html读取xml数据实例一</h3>
<table datasrc="#xx" border="1">
<thead> <th>序号</th> <th>区域</th> <th>名字</th> <th>电话</th> <th>QQ</th> <th>email</th>
</thead>
<tr>
<td><span datafld="nid"></span></td>
<td><span datafld="area"></span></td>
<td><span datafld="salename"></span></td>
<td><span datafld="phone"></span></td>
<td><span datafld="qq"></span></td>
<td><span datafld="email"></span></td>
</tr>
</table>
</body>
</html>
