Ajax的常用技巧（2）---实现Web页面中的级联菜单

aijuans

浏览: 1568160 次

最近访客更多访客>>

loginboot

taijibamen

pinocao

hejin_sl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 25)
2014-11 ( 13)
更多存档...

博客分类：

Ajax

Ajax

在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。
在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐藏。采用这种方法的弊端在于会造成浏览端下载的页面非常冗余，许多根本用不到的信息也必须提前装载到页面中。而如果借用Ajax技术，可以实现当用户选择对应的菜单项后，将对应的请求以异步的方式提交到服务端，然后又选择地从服务器端获取到对应的子菜单信息，在返回浏览器进行响应显示。
现在创建一个实例，以演示使用Ajax技术实现级联菜单的操作。在该实例中根据用户选择的作者名称，在子菜单中显示对应的个人信息。为了减少程序的复杂度，这里没有采用数据库中的数据实现。

1,服务器端的代码

本实例服务器端的代码主要实现依据客户端发送的数据，产生不同的相应信息。打开记事本，输入下列代码：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String sort=request.getParameter("sort");
String contents1="";
String contents2="";
if(sort.equals("IBM")){
contents1="岗位：责任编辑";
contents2="联系方式：15651865007";
}
else{
contents1="岗位：策划编辑";
contents2="联系方式：15298381049";
}
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
out.println("<res>"+contents1+"</res>");
out.println("<res>"+contents2+"</res>");
out.println("</response>");
out.close();
%>

将上述代码保存，名称为menujsp.jsp。在该文件中，使用request对象获取客户端传送的变量sort的值。创建两个变量contents1和contents2，依据客户端传送的数值，给变量contents1和contents2赋不同的值，然后使用response对象，将contents1和contents2的值，以xml文件格式返回给客户端。

2,客户端代码

本实例客户端代码主要实现异步数据传输，并依据服务端返回的数据显示。打开记事本，输入下列代码：

<%@ page contentType="text/html; charset=gb2312"  import="java.sql.*" errorPage="" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
var XMLHttpReq;
	var currentSort;
 	//创建XMLHttpRequest对象       
    function createXMLHttpRequest() {
		if(window.XMLHttpRequest) { //Mozilla 浏览器
			XMLHttpReq = new XMLHttpRequest();
		}
		else if (window.ActiveXObject) { // IE浏览器
			try {
				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	//发送请求函数
	function sendRequest(url) {
		createXMLHttpRequest();
		XMLHttpReq.open("GET", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.send(null);  // 发送请求
	}
	// 处理返回信息函数
    function processResponse() {
    	if (XMLHttpReq.readyState == 4) { // 判断对象状态
        	if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
				updateMenu();
		    } else { //页面不正常
		      	alert("您所请求的页面有异常。");
		    }
        }
    }
	//更新菜单函数
	function updateMenu() {
	    var res=XMLHttpReq.responseXML.getElementsByTagName("res")
	    var subMenu = "";
	    for(var i = 0; i < res.length; i++) {
	        subMenu = subMenu + "  " + res[i].firstChild.data + "<br>";
	    }
		currentSort.innerHTML = subMenu;
	}
	// 创建级联菜单函数
	function showSubMenu(obj) {
		currentSort =document.getElementById(obj); 
		if(currentSort.parentNode.style.display=="none"){
		currentSort.parentNode.style.display = "";
		sendRequest("menujsp.jsp?sort=" + obj);
		}
		else{
		currentSort.parentNode.style.display = "none";
		}
	}

</script> 
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111 
cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>

<TR>
  <TD align=middle bgColor=#dbc2b0 height=19><B>作者清单</B> </TD>
</TR>
<tr>
  <td height="20"> <a href="javascript:showSubMenu('IBM')">刘海松</a> </td>
</tr>
<tr style="display:none">
   <td height="20" id="IBM"> </td>
</tr>
<tr>
  <td height="20"> <a href="javascript:showSubMenu('SONY')">刘红霞</a> </td>
</tr>
<tr style="display:none ">
  <td id="SONY" height="20"> </td>
</tr>
</table>

将上述代码保存，名称为menu.jsp。在该文件中，用createXMLHttpRequest（）函数创建了XMLHttpRequest实例化对象，sendRequest(url)函数向服务器端发送一个异步请求，参数url表示服务器端的文件路径，名称和函数。ProcessResponse()函数用于处理服务器端的响应，该函数主要依据客户端返回的XML文件，解析XML文件数据，并显示在当前页面。ShowSubMenu(obj)函数是一个创建级联菜单函数，实际上该函数调用了sendRequest()函数向服务器发送异步信息。
该实例中的服务器端数据不但可以使用变量赋值获取，也可以从数据库中提取数据来显示。如果读者有兴趣的话，可以使用数据库表中的数据响应客户端的请求。

分享到：