实现基于Ajax的无限级菜单(1) - 编程吧
高级搜索

上一篇 | 下一篇

实现基于Ajax的无限级菜单(1)

发布: 2007-7-31 02:20 | 作者: 佚名 | 来源: 转载 | 查看: 11次

框架特点：

支持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带来的无闪刷新快感。

以上代码均在IE，FireFox测试过。


首先建立一个数据表menu 
mId菜单主键 


name　菜单名称 


url菜单链接 


father　低级菜单ＩＤ 


sub是否最底层菜单（用于判断是否还可以继续展开） 


target　菜单链接目标(用ajax方式打开时作为显示id) 

            
pa　菜单参数(这项用于ajax方式打开菜单)

制作一个菜单对象类 
class Menu{ 


private 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="http://java.sun.com/jsp/jstl/core" 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}" 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=" cursor:hand;"> 


a href="#" class="text1">${m.name} 


/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.target}','${m.pa}');"> 


img src="pic/menu1.gif" id="img${m.mid}" alt=""> 


a href="#" class="text1">${m.name} 


/div> 


menu.js： 


//operMenu(打开下拉菜单的ＩＤ，打开的地址,链接打开的目标，参数)。 


//这是用在menu.jsp的方法 


function showMenu(id,url,target,param){ 


var trObj = document.getElementById("tr"+id); 


var tdObj = document.getElementById(id); 


//try{ 


if(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.gif" 


Bcandy(id,"page/menu.jsp",param,""); 


openMenu(url,target,param); 


}else{ 


//如果里面有内容，直接显示 


document.getElementById("tr"+id).style.display = ""; 


document.getElementById("img"+id).src = "pic/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,ta 更多文章 更多内容请看Ajax技术应用开发  Ajax技术专题  AJAX应用实践专题，或

软件学院 | 网站建设 | 
PHP学习 | ASP学习 | 
ASP.NET学习 | JSP学习






字号: 小 中 大 |
推荐给好友











 






评分：0






我来说两句






 seccode
























最新更新















	


编程吧 | 
交流论坛 | 
快捷面板 | 
站点地图 | 
友情链接 | 
空间列表 | 
站点存档 | 
联系我们