跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例Word文档格式.docx
《跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例Word文档格式.docx》由会员分享，可在线阅读，更多相关《跟我学AJAX技术如何应用AJAX技术实现级联菜单的Web应用示例Word文档格式.docx（13页珍藏版）》请在冰点文库上搜索。
html"
//struts.apache.org/tags-logic"
logic"
//struts.apache.org/tags-tiles"
tiles"
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
>
html:
htmllang="
true"
<
head>
base/>
<
scriptlanguage="
javascript"
src="
ajaxMenu.js"
/script>
title>
ajaxMenu1.jsp<
/title>
metahttp-equiv="
pragma"
content="
no-cache"
cache-control"
expires"
0"
keywords"
keyword1,keyword2,keyword3"
description"
Thisismypage"
--
linkrel="
stylesheet"
type="
text/css"
href="
styles.css"
-->
/head>
body>
tablewidth="
200"
border="
cellspacing="
cellpadding="
tr>
tdheight="
20"
ahref="
#"
onclick="
showSubMenu（'
menu_1'
）"
>
菜单一
/a>
/td>
/tr>
id="
menu_1"
style="
display:
none"
&
nbsp;
menu_2'
菜单二
tr>
menu_2"
/table>
/body>
/html:
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=="
）
{
document.getElementById（newCurrentPos）.style.display="
sendRequest（"
/AJAXWebApp/ajaxmenu.do?
playPos="
+newCurrentPos）;
}
else
}
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（"
没有找到与所请求的文件相匹配的资源！
你所请求的页面发生异常，错误代码为：
+httpRequest.status）;
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"
PrintWriterout=response.getWriter（）;
StringplayPos=request.getParameter（"
playPos"
if（playPos.equals（"
））
{//实际可以访问数据库表来获得各个子菜单项目
StringsubMenuText=
&
ahref='
#'
菜单一中的子菜单一<
br>
+
"
菜单一中的子菜单二<
菜单一中的子菜单三<
out.write（subMenuText）;
out.close（）;
}
elseif（playPos.equals（"
））
{
StringsubMenuText=
菜单二中的子菜单一<
菜单二中的子菜单二<
菜单二中的子菜单三<
"
菜单二中的子菜单四<
catch（IOExceptione）
System.out.println（e.getMessage（））;
returnnull;
4、执行该功能
（1）部署本示例项目
（2）输入http:
//127.0.0.1:
8080/StrutsAJAXWebApp/ajaxMenu.jsp
（3）点击上面的菜单的链接，将展开对应的菜单项目
（4）如果再次点击上面的菜单的链接，将关闭对应的菜单项目
升级会员 