`
li-yuan
  • 浏览: 68196 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

JavaScriptJSPCSSIEMicrosoft 
阅读更多
     做完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代码
贴代码太麻烦
放附件里了

分享到：
| 云南二宝，对付高血脂
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp页面动态加载树形菜单

    下面将详细介绍如何在JSP中创建一个动态加载的树形菜单。 首先，理解基本概念： 1. JSP（JavaServer Pages）：它是Java EE平台的一部分，用于创建动态Web内容。JSP页面结合了HTML或XML标记与Java代码，使得开发者...

    ajax树形菜单 动态显示

    在这个“ajax树形菜单 动态显示”的项目中，我们关注的是如何利用Ajax技术来实现一个交互式的、只在需要时加载内容的树形菜单。 树形菜单是一种常见的用户界面元素，它通过层级结构来展示信息，常用于网站导航、...

    一个完整的ajax无限级树形菜单（含数据库）

    本项目提供了一个完整的解决方案，基于Ajax技术实现了一个无限级的树形菜单，并且与数据库相结合，实现了动态的数据加载和交互。 Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，通过...

    树形菜单Ajax实现

    1. **节点与层级**：树形菜单由多个节点组成，每个节点代表一个数据项。节点有层级关系，根节点位于顶层，子节点位于其下，可有多个层级。 2. **展开与折叠**：用户可以通过点击节点来展开或折叠其子节点，显示或...

    自己写的JS三层树形菜单，内容基于xml

    本项目是一个基于JavaScript实现的三层树形菜单，其核心内容是通过解析XML文件来动态生成菜单结构。下面将详细阐述这个项目中的关键知识点。 首先，我们关注的是“树形菜单”。树形菜单是一种呈现层次结构数据的...

    Ajax+jsp+oracle实现动态树形菜单

    总结来说，"Ajax+jsp+oracle实现动态树形菜单"项目是一个典型的前后端交互示例，它结合了客户端的Ajax技术、服务器端的JSP处理以及数据库操作，展示了如何高效地处理和展示层次结构的数据。通过理解这些技术的原理和...

    《ajax实现树形菜单》

    在本案例中，我们将讨论如何利用Ajax技术实现一个交互式的树形菜单。 树形菜单是一种常见的UI组件，它以层级结构展示信息，通常用于网站导航或文件系统浏览。在Web应用中，使用Ajax实现树形菜单可以使用户在不跳转...

    javascript操作xml生成树形菜单

    在本文中，我们将探讨如何使用JavaScript操作XML文档来生成树形菜单。树形菜单是一种常见的用户界面元素，用于组织和展示层次结构的数据，如网站导航或文件系统。在这个例子中，我们将使用提供的XML数据来构建这样一...

    javascript+xml树形菜单

    这样，我们就用 JavaScript 和 XML 在 IE 浏览器中创建了一个树形菜单。需要注意的是，由于这种方法依赖于 IE 特有的 ActiveXObject，因此在其他浏览器（如 Chrome、Firefox、Safari 或 Edge）中将无法工作。现代...

    js树形菜单实现拖动效果

    在读取后台数据时，我们需要编写一个Ajax请求函数，使用`XMLHttpRequest`对象或者现代浏览器的fetch API。请求的目标是服务器上的XML文件，例如`tree.xml`。一旦数据返回，我们可以解析XML，根据其结构创建DOM元素，...

    JavaScript 树形菜单

    3. **数据结构**：为了存储和操作树形菜单的数据，我们需要一个合适的数据结构。通常，我们可以使用数组或对象来表示树的节点，其中包含节点的文本、子节点列表以及是否展开的状态等信息。 4. **递归**：在构建树形...

    PHP ajax Tree树形菜单 v1.0

    **PHP AJAX Tree树形菜单 v1.0** 是一个基于PHP和AJAX技术实现的交互式树形菜单系统。在Web开发中，树形菜单常用于组织和展示层级关系的数据，如网站导航、文件目录结构或者数据库表的分类。这款组件能够提供动态...

    JSP Ajax树形菜单完整示例

    1. **HTML结构**：首先，我们需要在HTML页面中创建一个表示树形结构的基础框架，通常使用`&lt;ul&gt;`和`&lt;li&gt;`标签来构建层级关系。 2. **JavaScript处理**：使用JavaScript（如jQuery库）来处理用户的点击事件，当用户...

    基于JavaScript的树形菜单

    在本文中，我们将深入探讨如何使用JavaScript实现一个功能丰富的树形菜单。 一、理解树形菜单的结构 树形菜单的基础是树数据结构，每个节点代表一个菜单项，包含一个标题和可选的子节点列表。节点之间通过父节点和...

    java+ajax+mysql做的一个树形菜单

    在IT行业中，构建用户...通过这三个技术的组合，可以构建出一个动态的、响应式的树形菜单系统，满足用户对层级数据的浏览和操作需求。在学习和实践中，理解并掌握这些技术的应用原理，对于提升Web开发技能至关重要。

    js树形菜单演示程序

    在本示例中，“js树形菜单演示程序”是一个使用JavaScript实现的交互式树形菜单系统，它允许用户以层次结构的方式浏览和选择选项。 树形菜单在用户界面设计中非常常见，它能够有效地组织和展示大量的数据或功能模块...

    基于XML和ajax的树形菜单

    通过JavaScript的XMLHttpRequest对象，我们可以向服务器发送请求，获取XML数据，然后用JavaScript解析这些数据并动态构建树形菜单。 以下是一个简单的Ajax调用示例，用于获取XML数据： ```javascript var xhr = ...

    多种 js树形菜单 简单操作

    例如，一个简单的树形数据结构可能是这样的： ``` var tree = { id: 1, text: '父节点', children: [ { id: 2, text: '子节点1' }, { id: 3, text: '子节点2' } ] }; ``` 2. **遍历与渲染**： 渲染树形...

    Ajax 树形菜单，选择加载，不选择不加载

    在本场景中，"Ajax 树形菜单，选择加载，不选择不加载"是一个具体的应用实例，它涉及到以下几个关键知识点： 1. **树形菜单**：树形菜单是一种常见的用户界面元素，用于展示层次结构的数据。在网页中，它通常表现...

Magicbox
Global site tag (gtag.js) - Google Analytics