论坛首页 → Web前端技术论坛 →

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

浏览 5129 次
锁定老帖子 主题：一个用XMLHttpRequest动态装载的树形菜单
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • li-yuan
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 162
  • 来自: 成都
   发表时间：2007-10-09  
     做完JavaScript DOM Interfaces的培训，写了一个例子，结合XMLHttpRequest用86行代码实现的树形菜单。原理很简单每个节点就是一个div，每点击一个节点的图片就通过XMLHttpRequest把这个节点的所有子节点从jsp文件里装载到父节点的div里。
具体看代码吧
js 代码
 
  1. //XMLHttpRequest对象  
  2. var request = null;  
  3. //当前根节点  
  4. var currentNode = null;  
  5. var url = null;  
  6. //存放被点击过节点的状态  
  7. var states = new Array();  
  8. //初始化XMLHttpRequest对象  
  9. function ready(inUrl){  
  10.   try{  
  11.        request =new XMLHttpRequest();  
  12.   }catch(e){  
  13.        request =new ActiveXObject("Microsoft.XMLHTTP");  
  14.   }  
  15.   request.onreadystatechange=loadNode;  
  16.   url=inUrl;  
  17. }  
  18. //回调函数，等到数据放在子节点内  
  19. function loadNode(){  
  20.   if(request.readyState==4){  
  21.      if (request.status == 200||request.status == 0) {  
  22.        
  23.        var newContent = request.responseText;  
  24.        //删除提示  
  25.        dataHit = document.getElementById("dataHit");  
  26.        if(dataHit!=null)  
  27.           currentNode.removeChild(dataHit);  
  28.        //创建显示子节点的div,独立用一个div便于close的时候删除掉  
  29.        content=document.createElement("div");  
  30.        content.setAttribute("luck","true");  
  31.        content.innerHTML = newContent;  
  32.        currentNode.appendChild(content);  
  33.      }  
  34.   }  
  35. }  
  36. //从根节点装载树  
  37. function loadTree(url,id){  
  38.   ready(url);  
  39.   var sel = document.getElementById(id);  
  40.     
  41.   currentNode = sel;  
  42.   open(id);  
  43. }  
  44. //处理图片被单击事件，根据节点状态确定是open还是close,并设置节点的新状态  
  45. function doclick(id){  
  46.    var sel = document.getElementById(id);  
  47.    currentNode = sel;  
  48.    if(states[id]=="opened"){  
  49.        close(id);  
  50.        states[id]="closed";  
  51.    }else{  
  52.        open(id);  
  53.        states[id]="opened";  
  54.    }         
  55. }  
  56. //打开一个节点，显示它的所有子节点  
  57. function open(id){  
  58.      
  59.    //现在装载数据提示  
  60.    dataHit=document.createElement("div");  
  61.    dataHit.setAttribute("id","dataHit");  
  62.    //dataHit.innerHTML="正在装载数据...";  
  63.    text=document.createTextNode("正在装载数据...");  
  64.    dataHit.appendChild(text);  
  65.    currentNode.appendChild(dataHit);  
  66.    try{  
  67.      img = document.getElementById("img"+id);  
  68.      img.setAttribute('src',"img/folderopen.gif");  
  69.   }catch(e){}  
  70.    //与服务器端通讯  
  71.    ready(url);//IE比较奇怪，每次都要新建XMLHttpRequest对象  
  72.    //在url添加一个随机数，这样防止XMLHttpRequest缓存数据  
  73.    request.open('GET',url+"?id="+id+"&randnum=" + Math.random(),true);  
  74.    request.send(null);  
  75. }  
  76. //关闭一个已打开的节点  
  77. function close(id){  
  78.    //删除不再显示的子节点  
  79.    allnodes=currentNode.getElementsByTagName("div");  
  80.    for(var i=0;i
  81.       currentNode.removeChild(allnodes.item(i));  
  82.    }  
  83.    //更改图标  
  84.    img = document.getElementById("img"+id);  
  85.    img.setAttribute('src',"img/folder.gif");     
  86. }  
使用的html代码
xml 代码
 
  1. >  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> 动态树 <!---->TITLE>  
  5. <link rel="StyleSheet" href="tree.css" type="text/css" />  
  6. <script type="text/javascript" src="tree.js"><!---->script>  
  7. <!---->HEAD>  
  8. <BODY>  
  9. <div id="tree">  
  10. <!---->div>  
  11. <SCRIPT LANGUAGE="JavaScript">  
  12. <!---->
  13. loadTree('treenode.jsp','tree');  
  14. //-->  
  15. <!---->SCRIPT>  
  16. <!---->BODY>  
  17. <!---->HTML>  
最后，十分偷懒的jsp代码
贴代码太麻烦
放附件里了
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics