<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>
HTML文件：<!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>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>DOMTest2 </title>
<script language="javascript">
var request = false
try {
request = new XMLHttpRequest()
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (failed) {
request = false
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!")
function callServer() {
var firstName = document.getElementById("firstName").value
var lastName = document.getElementById("lastName").value
var street = document.getElementById("street").value
var city = document.getElementById("city").value
var state = document.getElementById("state").value
var zipCode = document.getElementById("zipCode").value
var xmlString = " <profile>" +
" <firstName>" + escape(firstName) + " </firstName>" +
" <lastName>" + escape(lastName) + " </lastName>" +
" <street>" + escape(street) + " </street>" +
" <city>" + escape(city) + " </city>" +
" <state>" + escape(state) + " </state>" +
" <zip-code>" + escape(zipCode) + " </zip-code>" +
" </profile>"
// Build the URL to connect to
var url = "/Ajax/scripts/saveAddress.xml"
// Open a connection to the server
request.open("POST", url, true)
// Tell the server you're sending it XML
request.setRequestHeader("Content-Type", "text/xml")
// Set up a function for the server to run when it's done
request.onreadystatechange = updatePage
// Send the request
request.send(xmlString)
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML
var showElements = xmlDoc.getElementsByTagName("show")
for (var x=0x <showElements.lengthx++) {
alert("Operator XML file.")
// We know that the first child of show is title, and the second is rating
var title = showElements[x].childNodes[0].value
var rating = showElements[x].childNodes[1].value
document.getElementById("title").value=title
document.getElementById("rating").value=rating
// Now do whatever you want with the show title and ratings
}
}
else if (request.status == 404)
{ alert("Request URL does not exist")}
else if (request.status == 403) {
alert("Access denied.")
}
else
alert("Error: status code is " + request.status)
}
}
</script>
</head>
<body>
<div id="firstName">aaaa </div>
<div id="lastName">bbbb </div>
<div id="street">cccc </div>
<div id="city">dddd </div>
<div id="state">eeee </div>
<div id="">ffff </div>
<div id="zipCode">12334 </div>
<input id="title" type="text"/>
<input id="rating" type="text"/>
<input type="button" value="Click me!" onclick="callServer()" />
</body>
</html>
XMML文件：
saveAddress.xml
<?xml version="1.0" encoding="gb2312"?>
<ratings>
<show>
<title>Alias </title>
<rating>6.5 </rating>
</show>
<show>
<title>Lost </title>
<rating>14.2 </rating>
</show>
<show>
<title>Six Degrees </title>
<rating>9.1 </rating>
</show>
</ratings>
JS]利用js将读取到的xml文件中的数据显示到html文档上script type="text/javascript" language="javascript">
var xmlDoc = checkXMLDocObj('../openClass.xml')//读取到xml文件中的数据
var a = document.getElementsByTagName("a")//获取所有的A标签
$(document).ready(function () {
var nodes
if($.browser.msie){ // 注意各个浏览器之间的区别
nodes = xmlDoc.getElementsByTagName('collage')[0].childNodes//读取XML文件中需要显示的数据
}
else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0){
nodes = xmlDoc.getElementsByTagName('collage')[0].children//读取XML文件中需要显示的数据
}
else{
nodes = xmlDoc.getElementsByTagName('resource')
}
for (var i = 0i <a.lengthi++) {
if (a[i].parentNode.nodeName == "SPAN") {
for (var j = 0j <nodes.lengthj++) {
var resource = nodes[j]
var url = resource.getAttribute('url')
var href=$(a[i]).attr("href")
if (href == url) {
var count = resource.getAttribute('click')
var span = document.createElement("div")
var str = document.createTextNode("点击率：" + count)
span.appendChild(str)
var div = a[i].parentNode.parentNode
div.appendChild(span)
break
}
}
}
}
})
$(function(){ //通过get请求，将点击率增加
$(a).mousedown(function(){
var href = $(this).attr("href")
$.get("../receive.ashx",{url:href,rd:Math.random()}, function (msg) {
})
})
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）