html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="xmlhttprequest.js"></script>
</HEAD>
<BODY>
<div id="see">
</div>
<input type="button" onclick="sendRequest()" value="SendRequest">
<script>
var xmlhttp = new XMLHttpRequest();
var xmldoc;
function sendRequest(){
document.all("see").innerHTML = "Loading....";
var url = "http://localhost:8080/tree.xml";
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange = viewPage;
xmlhttp.send(null);
}
function viewPage(){
if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
alert("haha get xml ")
xmldoc = xmlhttp.responseXML;
var xmlobj = xmldoc.documentElement;
var str = "";
for(var i = 0; i< xmlobj.childNodes.length;i++){
var node = xmlobj.childNodes[i];
var text = node.getAttribute("nodeid");
var value = text;
str += "<span style='display:block' onclick='getsub(\""+value+"\")'>"+text+"</span><br><div style='display:none' id="+text+"></div>";
}
document.all.see.innerHTML = str;
//alert(xmlobj.tagName)
}
}
function getsub(id){
if(xmldoc!=null){
var root = xmldoc.getElementsByTagName("TreeNode");
var str2 = "";
for(var k = 0;k<root.length;k++){
if(root[k].getAttribute("nodeid")==id){
document.all(id).style.display = '';
document.all(id).innerHTML = "loading..."
alert("get sub tree")
var nodes = root[k].childNodes;
for(var m = 0;m<nodes.length;m++){
var node = nodes[m];
var text = node.getAttribute("nodeid");
str2 += "<span onclick='getsub(\""+text+"\")'> "+text+"</span><br><div style='display:none' id="+text+"></div>";
}
document.all(id).innerHTML = str2 ;//alert(document.all(id).innerHTML)
}
}
}else{
alert("Exception!!");
}
}
</script>
</BODY>
</HTML>
需要访问的xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<Tree>
<TreeNode nodeid="wangzhongjie">
<TreeNode nodeid="wang"></TreeNode>
<TreeNode nodeid="zhong"></TreeNode>
<TreeNode nodeid="jie"></TreeNode>
</TreeNode>
<TreeNode nodeid="yinhang">
<TreeNode nodeid="yin"></TreeNode>
<TreeNode nodeid="hang"></TreeNode>
</TreeNode>
</Tree>