使用ajax技术实现点击菜单时，展开当前子菜单列表，隐藏其他子菜单功能；前端使用静态html页面生成一级菜单，当点击某个菜单时，发送数据到后端(jsp文件)，利用responseXML返回xml格式文件，刷新二级菜单。
ajax.js
var xmlhttp=null;
//创建XMLHttpRequest对象
function createHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新版IE
}catch(e){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = null;
}
}
}
if(!xmlhttp){ //创建XMLHttpRequest失败
alert("不能创建XMLHttpRequest对象实例");
}
}
//发送函数
function sendRequest(method,url,param,callbackHandler){
//创建对象
createHttpRequest();
//绑定事件,后台返回的数据，通过callback方法处理
xmlhttp.onreadystatechange = callbackHandler;
if(method=="get" || method=="GET"){
//初始化发送信息
xmlhttp.open(method,url + "?" + param,true);
xmlhttp.send(null);
}
if(method=="post" || method=="POST"){
//初始化发送信息
xmlhttp.open(method,url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(param);
}
}前端文件：menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Ajax应用举例</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
var dep=null;
function getMembers(depart){
if(depart!="null"){
hideMenu();
dep = depart;
var url="/ajaxProj/T2/select.jsp";
var params = 'depart=' + depart;
sendRequest('GET',url,params,showMembers);
}
}
//根据提交部门返回的职员列表动态加载数据
function showMembers(){
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//获取xml格式的数据xmlhttp.responseXML
//membersData获得的是一个数组
var membersData = xmlhttp.responseXML.getElementsByTagName("member");
console.log(membersData);
var mdisplay = '';
for(var i=0;i<membersData.length;i++){
mdisplay += ' ';
mdisplay += membersData[i].childNodes[1].firstChild.nodeValue;
mdisplay += '<br>';
}
//显示选中的部门display（block显示，none隐藏),隐藏内容同时隐藏空间
//visibility(hidden,visible),隐藏内容，不隐藏空间
document.getElementById(dep).parentNode.style.display='block';
document.getElementById(dep).innerHTML=mdisplay;
} else { //页面不正常
alert("您请求的页面有异常");
}
}
}
//隐藏菜单
function hideMenu(){
if(!dep) return ;
if(document.getElementById(dep).parentNode.style.display=='none'){
document.getElementById(dep).parentNode.style.display='block';
} else if(document.getElementById(dep).parentNode.style.display='block'){
document.getElementById(dep).parentNode.style.display='none';
document.getElementById(dep).innerHTML=' ';
return ;
}
}
</script>
</head>
<body>
<h1>多级菜单</h1>
<hr />
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><a href="javascript:void(0)" onClick="getMembers('d1')">部门1</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="d1"> </td>
</tr>
<tr>
<td height="20"><a href="javascript:void(0)" onClick="getMembers('d2')">部门2</a>
</td>
</tr>
<tr style="display:none ">
<td id="d2" height="20"> </td>
</tr>
<tr>
<td height="20"><a href="javascript:void(0)" onClick="getMembers('d3')">部门3</a>
</td>
</tr>
<tr style="display:none ">
<td id="d3" height="20"> </td>
</tr>
<tr>
<td height="20"><a href="javascript:void(0)" onClick="getMembers('d4')">部门4</a>
</td>
</tr>
<tr style="display:none ">
<td id="d4" height="20"> </td>
</tr>
</table>
</body>
</html>后端代码（select.jsp）：
<%@ page contentType="text/xml; charset=gb18030"%><%@ page import="java.util.*" %><%
Map map = new HashMap();
String d1 = "<member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member>";
String d2 = "<member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member>";
String d3 = "<member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member>";
String d4 = "<member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member>";
map.put("d1",d1);
map.put("d2",d2);
map.put("d3",d3);
map.put("d4",d4);
String depart= request.getParameter("depart");
if(depart==null) depart = "d1";
StringBuffer sb = new StringBuffer();
sb.append("<members>");
sb.append(map.get(depart).toString());
sb.append("</members>");
out.write("<?xml version='1.0' encoding='gb2312' ?>");
out.write(sb.toString());
%>运行效果：
