跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例.docx
《跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例.docx》由会员分享，可在线阅读，更多相关《跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例.docx（13页珍藏版）》请在冰豆网上搜索。
跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例
1.1跟我学AJAX技术——如何应用AJAX技术实现级联菜单的Web应用示例
1.1.1常规的Web级联菜单所存在的问题
以前，为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性地将级联菜单的所有数据全部读取出来并写入到数组中，然后根据用户的操作用JavaScript+CSS来控制它的子集项目的显示，这样虽然解决了操作响应的速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或者只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为多余而浪费用户的资源，特别是在菜单的结构复杂、数据量大的情况下，这样的弊端就更为突出！
而如果采用AJAX技术来实现（JavaScript+CSS+AJAX），在页面初始化的时候，我们只需要读出其一级菜单的数据并显示出。
而在用户操作时，则通过AJAX向后台请求其下一级的菜单数据并显示出------这样，需要什么就下载什么！
1.1.2构建本示例的Web应用项目
1、添加一个JSP页面ajaxMenu.jsp
（1）创建ajaxMenu.jsp页面文件
（2）在该页面中添加一个表格，并且在其中放上超链接
<%@pagelanguage="java"pageEncoding="GB18030"%>
<%@tagliburi="http:
//struts.apache.org/tags-bean"prefix="bean"%>
<%@tagliburi="http:
//struts.apache.org/tags-html"prefix="html"%>
<%@tagliburi="http:
//struts.apache.org/tags-logic"prefix="logic"%>
<%@tagliburi="http:
//struts.apache.org/tags-tiles"prefix="tiles"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
htmllang="true">
base/>
ajaxMenu1.jsp
--
-->
菜单一
|
none">
|
菜单二
|
none">
|
html>
（3）ajaxMenu.jsp页面文件的预览示图
2、再添加JavaScript的文件ajaxMenu.js
（1）创建JavaScript文件ajaxMenu.js
（2）编程ajaxMenu.js文件中的功能实现代码
varhttpRequest;
varcurrentPos;
functionshowSubMenu（newCurrentPos）
{
document.getElementById（newCurrentPos）.parentNode.style.display="";
currentPos=newCurrentPos;
if（document.getElementById（newCurrentPos）.style.display=="none"）
{
document.getElementById（newCurrentPos）.style.display="";
sendRequest（"/AJAXWebApp/ajaxmenu.do?
playPos="+newCurrentPos）;
}
else
{
document.getElementById（newCurrentPos）.style.display="none";
}
}
functionsendRequest（requestURL）
{
httpRequest=getHTTPRequestObject（）;
httpRequest.onreadystatechange=processHttpResponse;
httpRequest.open（"GET",requestURL,true）;//Get请求方式的代码
httpRequest.send（null）;
}
functiongetHTTPRequestObject（）
{
varhttpRequestObject;
if（window.XMLHttpRequest）
{//Mozilla,Safari,...
httpRequestObject=newXMLHttpRequest（）;
}
elseif（window.ActiveXObject）
{//IE
try
{
httpRequestObject=newActiveXObject（"Microsoft.XMLHTTP"）;
}
catch（e）
{
try
{
httpRequestObject=newActiveXObject（"Msxml2.XMLHTTP"）;
}
catch（e2）
{
alert（"您的浏览器有问题！
"）;
}
}
}
returnhttpRequestObject;
}
functionprocessHttpResponse（）
{
if（httpRequest.readyState==4）
{
if（httpRequest.status==200）
{//检查是否成功接收了服务器响应
parseResponseText（）;
}
elseif（httpRequest.status==404）
{
alert（"没有找到与所请求的文件相匹配的资源！
"）;
}
else
{
alert（"你所请求的页面发生异常，错误代码为：
"+httpRequest.status）;
}
}
else
{
document.getElementById（currentPos）.innerHTML="检测中，请稍等...";
}
}
functionparseResponseText（）
{
document.getElementById（currentPos）.innerHTML=httpRequest.responseText;
}
functionLoadJS（file）//动态加载JS文件
{
varhead=document.getElementsByTagName（'HEAD'）.item（0）;
varscript=document.createElement（'SCRIPT'）;
script.src=file;
script.type="text/javascript";
head.appendChild（script）;
}
3、添加一个Action类
（1）切换到可视化设计视图
（2）设置类名称为AjaxMenuAction，程序包名称为com.px1987.webajax.action/ajaxmenu
（3）将产生出下面的Action类
（4）编程AjaxMenuAction程序类中的功能实现方法
packagecom.px1987.webajax.action;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.struts.action.Action;
importorg.apache.struts.action.ActionForm;
importorg.apache.struts.action.ActionForward;
importorg.apache.struts.action.ActionMapping;
importjava.io.*;
publicclassAjaxMenuActionextendsAction
{
publicActionForwardexecute（ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse）
{
response.setContentType（"text/html;charset=GBK"）;
try
{
PrintWriterout=response.getWriter（）;
StringplayPos=request.getParameter（"playPos"）;
if（playPos.equals（"menu_1"））
{//实际可以访问数据库表来获得各个子菜单项目
StringsubMenuText=
" 菜单一中的子菜单一
"+
" 菜单一中的子菜单二
"+
" 菜单一中的子菜单三";
out.write（subMenuText）;
out.close（）;
}
elseif（playPos.equals（"menu_2"））
{
StringsubMenuText=
" 菜单二中的子菜单一
"+
" 菜单二中的子菜单二
"+
" 菜单二中的子菜单三
"+
" 菜单二中的子菜单四";
out.write（subMenuText）;
out.close（）;
}
}
catch（IOExceptione）
{
System.out.println（e.getMessage（））;
}
returnnull;
}
}
4、执行该功能
（1）部署本示例项目
（2）输入http:
//127.0.0.1:
8080/StrutsAJAXWebApp/ajaxMenu.jsp
（3）点击上面的菜单的链接，将展开对应的菜单项目
（4）如果再次点击上面的菜单的链接，将关闭对应的菜单项目
升级会员 