一个用XMLHttpRequest动态装载的树形菜单

最新推荐文章于 2022-05-11 08:00:00 发布

最新推荐文章于 2022-05-11 08:00:00 发布 · 155 阅读

文章标签：

#JavaScript #JSP #CSS #IE #Microsoft #ViewUI

做完JavaScript DOM Interfaces的培训，写了一个例子，结合XMLHttpRequest用86行代码实现的树形菜单。原理很简单每个节点就是一个div，每点击一个节点的图片就通过XMLHttpRequest把这个节点的所有子节点从jsp文件里装载到父节点的div里。
具体看代码吧

js 代码

//XMLHttpRequest对象
var request = null;
//当前根节点
var currentNode = null;
var url = null;
//存放被点击过节点的状态
var states = new Array();
//初始化XMLHttpRequest对象
function ready(inUrl){
try{
request =new XMLHttpRequest();
}catch(e){
request =new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange=loadNode;
url=inUrl;
}
//回调函数，等到数据放在子节点内
function loadNode(){
if(request.readyState==4){
if (request.status == 200||request.status == 0) {
var newContent = request.responseText;
//删除提示
dataHit = document.getElementById("dataHit");
if(dataHit!=null)
currentNode.removeChild(dataHit);
//创建显示子节点的div,独立用一个div便于close的时候删除掉
content=document.createElement("div");
content.setAttribute("luck","true");
content.innerHTML = newContent;
currentNode.appendChild(content);
}
}
}
//从根节点装载树
function loadTree(url,id){
ready(url);
var sel = document.getElementById(id);
currentNode = sel;
open(id);
}
//处理图片被单击事件，根据节点状态确定是open还是close,并设置节点的新状态
function doclick(id){
var sel = document.getElementById(id);
currentNode = sel;
if(states[id]=="opened"){
close(id);
states[id]="closed";
}else{
open(id);
states[id]="opened";
}
}
//打开一个节点，显示它的所有子节点
function open(id){
//现在装载数据提示
dataHit=document.createElement("div");
dataHit.setAttribute("id","dataHit");
//dataHit.innerHTML="正在装载数据...";
text=document.createTextNode("正在装载数据...");
dataHit.appendChild(text);
currentNode.appendChild(dataHit);
try{
img = document.getElementById("img"+id);
img.setAttribute('src',"img/folderopen.gif");
}catch(e){}
//与服务器端通讯
ready(url);//IE比较奇怪，每次都要新建XMLHttpRequest对象
//在url添加一个随机数，这样防止XMLHttpRequest缓存数据
request.open('GET',url+"?id="+id+"&randnum=" + Math.random(),true);
request.send(null);
}
//关闭一个已打开的节点
function close(id){
//删除不再显示的子节点
allnodes=currentNode.getElementsByTagName("div");
for(var i=0;i
currentNode.removeChild(allnodes.item(i));
}
//更改图标
img = document.getElementById("img"+id);
img.setAttribute('src',"img/folder.gif");
}

使用的html代码

xml 代码

>
<HTML>
<HEAD>
<TITLE> 动态树 TITLE>
<link rel="StyleSheet" href="tree.css" type="text/css" />
<script type="text/javascript" src="tree.js">script>
HEAD>
<BODY>
<div id="tree">
div>
<SCRIPT LANGUAGE="JavaScript">
loadTree('treenode.jsp','tree');
//-->
SCRIPT>
BODY>
HTML>

最后，十分偷懒的jsp代码
贴代码太麻烦
放附件里了