实现基于Ajax的无限级菜单.doc

实现基于 Ajax 的无限级菜单.txt爱情是艺术，结婚是技术，离婚是算术。这年头女孩们都在争做小“腰”精，谁还稀罕小“腹”婆呀？高职不如高薪，高薪不如高寿，高寿不如高兴。现在到处都有这方面的教程，我重点说一下我自己搞的一个框架。特点：支持Form的无闪提交（方法有点笨）支持框架，即支持传统网页架构多线程并发请求（要语言支持线程）动态加载文件，只加载有用的！处理了Ajax框架臃肿的JS文件问题。采用no table的全div + css布局a. 获得XMLHTTPRequest对象，网上到处都找得到了，不多说：function newXMLHttpRequest() var xmlreq = false;if (window.XMLHttpRequest) xmlreq = new XMLHttpRequest(); else if (window.ActiveXObject) try xmlreq = new ActiveXObject(Msxml2.XMLHTTP); catch (e1) try xmlreq = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) return xmlreq;这里提供一个通用的支持多浏览器的方法。b.提出异步请求/这里用Bcandy作为方法名是为了感谢一个对我来说很重要的人，她一直在支持我function Bcandy(Tid,url,parm,js) if(url = )return;/这是一个加载信息提示框，也可以不要！document.getElementById(load).style.visibility = visible;/加载相应页面的JS文件if(js != null)/加载文件LoadJS(js);/ 获取一个XMLHttpRequest实例var req = newXMLHttpRequest();/ 设置用来从请求对象接收回调通知的句柄函数var handlerFunction = getReadyStateHandler(req,Tid);req.onreadystatechange = handlerFunction;/ 第三个参数表示请求是异步的req.open(POST, url, true);/ 指示请求体包含form数据req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);/ 发送参数req.send(parm);function getReadyStateHandler(req,Tid) / 返回一个监听XMLHttpRequest实例的匿名函数return function () / 如果请求的状态是“完成”if (req.readyState = 4) / 成功接收了服务器响应if (req.status = 200) /下面一句是重点，这里显示了返回信息的内容部分，也可以加以修改。进行其它处理document.getElementById(Tid).innerHTML = req.responseText;document.getElementById(Tid).style.visibility = visible;/这一句是实现加载信息提示框的隐藏，也可以不要。document.getElementById(load).style.visibility = hidden; else / 有HTTP问题发生document.getElementById(load).style.visibility = hidden;alert(HTTP error: +req.status);/动态加载文件function LoadJS(file)var head = document.getElementsByTagName(HEAD).item(0);var script = document.createElement(SCRIPT);script.src = file;script.type = text/javascript;head.appendChild(script);这就是基本的框架了，因为使用了request.responseText;所以，可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理，因为Form不支持异步请求。建议在这些页面上不要加入标签，就像.net里的asxm文件！而且在使用Struts框架时有点要注意的是，Mapping对象直接返回null就可以了，因为我们会在下面讲到并发多线程。来处理这个问题的。总的来看，有点像是积木搭建起来的。这样方便文件的修改和扩展，互相之间并不影响，而且，实现了代码和标签分离。在进行传统页面改版时，也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。以上代码均在，下测试过！首先建立一个数据表menumId菜单主键name菜单名称url菜单链接father低级菜单sub是否最底层菜单（用于判断是否还可以继续展开）target菜单链接目标(用ajax方式打开时作为显示id)pa菜单参数(这项用于ajax方式打开菜单)制作一个菜单对象类class Menuprivate int mId;private String name;./其它成员public getMid()return mId;public setMid(int mId)this.mId = mId;./其它成员的get set方法，另一个是操作类class MenuOpt()public Vector getMenus(int father)Vector vector = new Vector();/这里是取得父级菜单为father的全部菜单/并封装进Vector的一个对象中。return vector;其次就是一般的jsp文件了。但要注意以前说过的，不要包含标签！menu.jsp：%page contentType=text/html; charset=GB2312%taglib uri=/jsp/jstl/core prefix=c%jsp:useBean id=menu scope=page class=ycoe.basic.MenuOpt/jsp:setProperty name=menu property=father value=$param.father/divc:forEach var=m items=$menu.vector varStatus = cc:choosec:when test=$m.sub eq Ydiv onClick=showMenu($m.mid,$m.url,$m.target,father=$m.mid)img src=pic/menu0.gif id=img$m.mid alt= style= cursor:hand;a href=# class=text1$/divdiv style=display:none; id=tr$m.middiv style=padding-left:12pt id=$m.mid/div/c:whenc:otherwisediv onclick=openMenu($m.url,$m.target,$m.pa);img src=pic/menu1.gif id=img$m.mid alt=a href=# class=text1$/divmenu.js：/operMenu(打开下拉菜单的，打开的地址,链接打开的目标，参数)。/这是用在menu.jsp的方法function showMenu(id,url,target,param)var trObj = document.getElementById(tr+id);var tdObj = document.getElementById(id);/tryif(document.getElementById(tr+id).style.display = none)/显示菜单if(tdObj.innerHTML = null | tdObj.innerHTML = )/提取数据document.getElementById(tr+id).style.display = ;document.getElementById(img+id).src = pic/menu2.gifBcandy(id,page/menu.jsp,param,);openMenu(url,target,param);else/如果里面有内容，直接显示document.getElementById(tr+id).style.display = ;document.getElementById(img+id).src = pic/menu2.gifopenMenu(url,target,param);/Bcandy(target,url,param,);/打开菜单链接else/隐藏菜单document.getElementById(tr+id).style.display = none;document.getElementById(img+id).src = pic/menu0.gif/catch(e)/打开菜单function openMenu(url,target,param)/这里不用我写了吧。有好几种实现方法，建议使用ajax实现！ 最后是显示页面：% page contentType=text/html; charset=GB2312 %meta http-equiv=Content-Type content=text/html; charset=gb2312style.text1:hover border: 1px #999999 solid; background-color: #CCCCCC; height: 12px;.text1border: 1px #FFFFFF solid; height: 12px;function ini()Bcandy(0,menu.jsp,id=0&father=0,menu.js);body onload=ini();div id=load style=z-index:1; color:#FF0000; visibility:hidden; filter: Alpha(opacity=85); background-color:#FFFFFF; left: 48%; top: 48%;BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 12px;PADDING-BOTTOM: 12px; BORDER-LEFT: #000000 1px solid; LINE-HEIGHT: 22px; PADDING-TOP: 12px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute;img src=pic/loop.gif alt=数据处理中，请稍候.brdiv id=0 align=center可以看到，无论在哪个层面，都和传统的没什么分别，只有jsp部分除去文件头而已（其实不去掉也行的，呵呵），而且，还可以看到，一个页面，已经分成了好几部分。就像之前说的那样，积木式的（这是网上看到一篇关于.net框架的结构时作者提出的一种结构，觉得不错，被我应用到来了）。在一些细节方面，我作了一些保留，请理解。但大致框架都是经过IE和FireFox 测试。一些功能方面的扩展，自己想想了。原理：其实就是应用了页面递归！就和一般的递归方法一下，不过用在页面上而已div id=tr$m.id循环，将从封装进vector的对象逐一显示出来forif(如果是最上层菜单sub=N)div id=t$m.id onClick=ShowMenu($m.father.)显示菜单内容div style=display:none id=td$m.id.elsediv onClick=OpenMenu($m.id)显示菜单内容showMenu(fath