《实现基于 Ajax 的无限级菜单》由会员分享，可在线阅读，更多相关《实现基于 Ajax 的无限级菜单（10页珍藏版）》请在金锄头文库上搜索。
1、现在到处都有这方面的教程，我重点说一下我自己搞的一个框架。特点：支持 Form的无闪提交（方法有点笨）支持框架，即支持传统网页架构多线程并发请求（要语言支持线程）动态加载文件，只加载有用的！处理了 Ajax框架臃肿的 JS文件问题。采用 no table的全 div + css布局a. 获得 XMLHTTPRequest对象，网上到处都找得到了，不多说：function newXMLHttpRequest() var xmlreq = false;if (window.XMLHttpRequest) xmlreq = new XMLHttpRequest(); else if (window.
2、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.getEl
3、ementById(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);/ 指示请
4、求体包含 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) /下面一句是重点，这里显示了返回信息的内容部分，也可以加以修改。进行其它处理d
5、ocument.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);/动
6、态加载文件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不支持异步请求。建
7、议在这些页面上不要加入标签，就像.net 里的 asxm文件！而且在使用 Struts框架时有点要注意的是，Mapping 对象直接返回 null就可以了，因为我们会在下面讲到并发多线程。来处理这个问题的。总的来看，有点像是积木搭建起来的。这样方便文件的修改和扩展，互相之间并不影响，而且，实现了代码和标签分离。在进行传统页面改版时，也不用重新编写全部代码。只要修改一小部分就可以完美实现 Ajax带来的无闪刷新快感。以上代码均在，下测试过！首先建立一个数据表 menumId菜单主键name菜单名称url菜单链接father低级菜单sub是否最底层菜单（用于判断是否还可以继续展开）target菜单
8、链接目标(用 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的全部菜单/并封
9、装进 Vector的一个对象中。 。return vector;其次就是一般的 jsp文件了。但要注意以前说过的，不要包含标签！menu.jsp：%page contentType=text/html; charset=GB2312%taglib uri=http:/ 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
10、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$m.name/divdiv style=display:none; id=tr$m.middiv style=padding-left:12pt id=$m.mid/div/c:whenc:otherwisediv onclick=o
11、penMenu($m.url,$m.target,$m.pa);img src=pic/menu1.gif id=img$m.mid alt=a href=# class=text1$m.name/divmenu.js：/operMenu(打开下拉菜单的，打开的地址,链接打开的目标，参数)。/这是用在 menu.jsp的方法function showMenu(id,url,target,param)var trObj = document.getElementById(tr+id);var tdObj = document.getElementById(id);/tryif(document.
12、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(t
13、r+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)/这里不
14、用我写了吧。有好几种实现方法，建议使用 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,me
15、nu.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; PAD
