第4讲：使用ajax技术实现菜单展开或隐藏功能（xml数据）

CSDN专家-赖老师（软件之家）

已于 2023-06-24 10:31:43 修改

阅读量324

点赞数

分类专栏： Ajax+Jquery学习笔记文章标签： ajax javascript 前端 responseXML xmlhttprequest

于 2023-06-22 16:15:05 首次发布

本文链接：https://blog.csdn.net/software7503/article/details/131341881

版权

Ajax+Jquery学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章介绍了如何使用Ajax技术在前端静态HTML页面中实现点击菜单时展开子菜单的功能。当用户点击一级菜单，它向后端的JSP文件发送请求，JSP返回XML格式的数据，然后前端JavaScript解析并动态加载二级菜单的内容。这个过程实现了异步数据交换，提高了用户体验。

摘要由CSDN通过智能技术生成

使用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 += '&nbsp;&nbsp;&nbsp;';
					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='&nbsp;';
			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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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());
%>