注意: 实际开发中用不到,学习时可以看看..
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ajax - XML</title>
</head>
<style type="text/css">
#details{
width:400px;
height: 200px;
background-color: aliceblue;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
//alert(aNodes.length);
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
//document.getElementById("details")
var xmlDoc = request.responseXML;
var name = xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = xmlDoc.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue;
console.log(name +"-"+website+"-"+email);
var setXml = document.createElement("a");
var XmlValue = document.createTextNode(name);
setXml.href = website;
setXml.appendChild(XmlValue);
document.getElementById("details").innerHTML = "";
document.getElementById("details").appendChild(setXml);
}
}
}
return false;
}
}
}
</script>
<body>
<h1>people</h1>
<ul>
<li><a href="files/andy.xml">Andy</a></li>
<li><a href="files/richard.xml">Richard</a></li>
<li><a href="files/jeremy.xml">jeremy</a></li>
</ul>
<div id="details">
</div>
</body>
</html>
0则评论给“Ajax 读取 XML”