實(shí)現(xiàn)基于 Ajax 的無限級(jí)菜單

1、現(xiàn)在到處都有這方面的教程，我重點(diǎn)說一下我自己搞的一個(gè)框架。特點(diǎn)：支持Form的無閃提交（方法有點(diǎn)笨）支持框架，即支持傳統(tǒng)網(wǎng)頁(yè)架構(gòu)多線程并發(fā)請(qǐng)求（要語(yǔ)言支持線程）動(dòng)態(tài)加載文件，只加載有用的！處理了Ajax框架臃腫的JS文件問題。采用no table的全div + css布局a. 獲得XMLHTTPRequest對(duì)象，網(wǎng)上到處都找得到了，不多說：function newXMLHttpRequest() var xmlreq = false;if (window.XMLHttpRequest) xmlreq = new XMLHttpRequest(); else if (window.Active

2、XObject) try xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); catch (e1) try xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); catch (e2) return xmlreq;這里提供一個(gè)通用的支持多瀏覽器的方法。b.提出異步請(qǐng)求/這里用Bcandy作為方法名是為了感謝一個(gè)對(duì)我來說很重要的人，她一直在支持我function Bcandy(Tid,url,parm,js) if(url = "")return;/這是一

3、個(gè)加載信息提示框，也可以不要！document.getElementById("load").style.visibility = "visible"/加載相應(yīng)頁(yè)面的JS文件if(js != null)/加載文件LoadJS(js);/ 獲取一個(gè)XMLHttpRequest實(shí)例var req = newXMLHttpRequest();/ 設(shè)置用來從請(qǐng)求對(duì)象接收回調(diào)通知的句柄函數(shù)var handlerFunction = getReadyStateHandler(req,Tid);req.onreadystatechange = handlerFunct

4、ion;/ 第三個(gè)參數(shù)表示請(qǐng)求是異步的req.open("POST", url, true);/ 指示請(qǐng)求體包含form數(shù)據(jù)req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/ 發(fā)送參數(shù)req.send(parm);function getReadyStateHandler(req,Tid) / 返回一個(gè)監(jiān)聽XMLHttpRequest實(shí)例的匿名函數(shù)return function () / 如果請(qǐng)求的狀態(tài)是“完成”if (req.ready

5、State = 4) / 成功接收了服務(wù)器響應(yīng)if (req.status = 200) /下面一句是重點(diǎn)，這里顯示了返回信息的內(nèi)容部分，也可以加以修改。進(jìn)行其它處理document.getElementById(Tid).innerHTML = req.responseText;document.getElementById(Tid).style.visibility = "visible"/這一句是實(shí)現(xiàn)加載信息提示框的隱藏，也可以不要。document.getElementById("load").style.visibility = "h

6、idden" else / 有HTTP問題發(fā)生document.getElementById("load").style.visibility = "hidden"alert("HTTP error: "+req.status);/動(dòng)態(tài)加載文件function LoadJS(file)var head = document.getElementsByTagName('HEAD').item(0);var script = document.createElement('SCRIPT');scr

7、ipt.src = file;script.type = "text/javascript"head.appendChild(script);這就是基本的框架了，因?yàn)槭褂昧藃equest.responseText;所以，可以直接請(qǐng)求一個(gè)頁(yè)面jsp,servlet但在使用Struts框架的請(qǐng)求時(shí)要進(jìn)行特殊處理，因?yàn)镕orm不支持異步請(qǐng)求。建議在這些頁(yè)面上不要加入標(biāo)簽，就像.net里的asxm文件！而且在使用Struts框架時(shí)有點(diǎn)要注意的是，Mapping對(duì)象直接返回null就可以了，因?yàn)槲覀儠?huì)在下面講到并發(fā)多線程。來處理這個(gè)問題的?？偟膩砜?，有點(diǎn)像是積木搭建起來的。這樣方便文

8、件的修改和擴(kuò)展，互相之間并不影響，而且，實(shí)現(xiàn)了代碼和標(biāo)簽分離。在進(jìn)行傳統(tǒng)頁(yè)面改版時(shí)，也不用重新編寫全部代碼。只要修改一小部分就可以完美實(shí)現(xiàn)Ajax帶來的無閃刷新快感。以上代碼均在，下測(cè)試過！首先建立一個(gè)數(shù)據(jù)表menumId菜單主鍵name菜單名稱url菜單鏈接father低級(jí)菜單sub是否最底層菜單（用于判斷是否還可以繼續(xù)展開）target菜單鏈接目標(biāo)(用ajax方式打開時(shí)作為顯示id)pa菜單參數(shù)(這項(xiàng)用于ajax方式打開菜單)制作一個(gè)菜單對(duì)象類class Menuprivate int mId;private String name;./其它成員public getMid()return

9、mId;public setMid(int mId)this.mId = mId;./其它成員的get set方法，另一個(gè)是操作類class MenuOpt()public Vector getMenus(int father)Vector vector = new Vector();/這里是取得父級(jí)菜單為father的全部菜單/并封裝進(jìn)Vector的一個(gè)對(duì)象中。return vector;其次就是一般的jsp文件了。但要注意以前說過的，不要包含標(biāo)簽！menu.jsp：%page contentType="text/html; charset=GB2312"%>%ta

10、glib uri=" prefix="c"%>jsp:useBean id="menu" scope="page" class="ycoe.basic.MenuOpt"/>jsp:setProperty name="menu" property="father" value="$param.father"/>div>c:forEach var="m" items="$menu.vector&q

11、uot; varStatus = "c">c:choose>c:when test="$m.sub eq 'Y'">div onClick="showMenu('$m.mid','$m.url','$m.target','father=$m.mid')">img src="pic/menu0.gif" id="img$m.mid" alt="" style=" c

12、ursor:hand;">a href="#" class="text1">$/div>div style="display:none;" id="tr$m.mid">div style="padding-left:12pt" id="$m.mid">/div>/c:when>c:otherwise>div onclick="openMenu('$m.url','$m.ta

13、rget','$m.pa');">img src="pic/menu1.gif" id="img$m.mid" alt="">a href="#" class="text1">$/div>menu.js：/operMenu(打開下拉菜單的，打開的地址,鏈接打開的目標(biāo)，參數(shù))。/這是用在menu.jsp的方法function showMenu(id,url,target,param)var trObj = document.ge

14、tElementById("tr"+id);var tdObj = document.getElementById(id);/tryif(document.getElementById("tr"+id).style.display = "none")/顯示菜單if(tdObj.innerHTML = null | tdObj.innerHTML = "")/提取數(shù)據(jù)document.getElementById("tr"+id).style.display = ""docum

15、ent.getElementById("img"+id).src = "pic/menu2.gif"Bcandy(id,"page/menu.jsp",param,"");openMenu(url,target,param);else/如果里面有內(nèi)容，直接顯示document.getElementById("tr"+id).style.display = ""document.getElementById("img"+id).src = "pic

16、/menu2.gif"openMenu(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)/這里

17、不用我寫了吧。有好幾種實(shí)現(xiàn)方法，建議使用ajax實(shí)現(xiàn)！ 最后是顯示頁(yè)面：% page contentType="text/html; charset=GB2312" %>meta http-equiv=Content-Type content="text/html; charset=gb2312">style>.text1:hover border: 1px #999999 solid; background-color: #CCCCCC; height: 12px;.text1border: 1px #FFFFFF solid; he

18、ight: 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

19、: 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="">數(shù)據(jù)處理中，請(qǐng)稍候.br>div id="0" align="center">可以看到，無論在哪個(gè)層面，都和傳統(tǒng)的沒什么分別，只有jsp部分除去文件頭而已（其實(shí)不去掉也行的，呵呵），而且，還可以看到，一個(gè)頁(yè)面，已經(jīng)分成了好幾部分。就像之前說的那樣，積木式的（這是網(wǎng)上看到一篇關(guān)于.net框