Web级联菜单Struts.docx
- 文档编号:11379867
- 上传时间:2023-02-28
- 格式:DOCX
- 页数:16
- 大小:184.90KB
Web级联菜单Struts.docx
《Web级联菜单Struts.docx》由会员分享,可在线阅读,更多相关《Web级联菜单Struts.docx(16页珍藏版)》请在冰豆网上搜索。
Web级联菜单Struts
利用AJAX技术实现Web级联菜单
以前,为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性地将级联菜单的所有数据全部读取出来并写入到数组中,然后根据用户的操作用JavaScript+CSS来控制它的子集项目的显示,这样虽然解决了操作响应的速度、不重载页面以及避免向服务器频繁发送请求的问题,但是如果用户不对菜单进行操作或者只对菜单中的一部分进行操作的话,那读取的数据中的一部分就会成为多余而浪费用户的资源,特别是在菜单的结构复杂、数据量大的情况下,这样的弊端就更为突出!
而如果采用AJAX技术来实现(JavaScript+CSS+AJAX),在页面初始化的时候,我们只需要读出其一级菜单的数据并显示出。
而在用户操作时,则通过AJAX向后台请求其下一级的菜单数据并显示出------这样,需要什么就下载什么!
1、添加一个JSP页面ajaxMenu.jsp
在该页面中添加一个表格,并且在其中放上超链接
<%@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/>
--
-->
none">
none">
html>
2、再添加JavaScript的文件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)类名称为AjaxMenuAction,包名称为com.px1987.webajax.action/ajaxmenu
将产生出下面的Action类
(2)编程该Action类
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
点击上面的菜单的链接,将展开对应的菜单项目
如果再次点击上面的菜单的链接,将关闭对应的菜单项目
从Java类产生XML
把Ajax响应作为XML来传递有许多原因:
每个支持Ajax的浏览器都有导航XML文档的方法,也有许多服务器端技术可以处理XML数据。
通过制定一个方案,描述要交换的文档类型,在Ajax客户端和服务器端之间很容易定义合约,而且如果服务器端架构采用面向服务的方式,那么使用XML也可以允许非Ajax客户机使用您提供的数据。
1、自行进行序列化
首先,可以从对象图以编程的方式生成XML。
这种方式可以简单到只是在每个JavaBean类中实现toXml()方法即可。
然后就可以选择合适的XMLAPI,让每个JavaBean提供表示自己状态的元素,并递归地对自己的成员调用对象图。
2、Order类的toXml()的JDOM实现
(1)在线商店中的模型
下面的这个模型代表在线商店中的顾客帐户。
顾客拥有以前订单的集合,每个订单包含几个商品。
(2)代码
publicElementtoXml()
{
ElementelOrder=newElement("order");
elOrder.setAttribute("id",id);
elOrder.setAttribute("cost",getFormattedCost());
ElementelDate=newElement("date").addContent(date);
elOrder.addContent(elDate);
ElementelItems=newElement("items");
for(Iterator
items.iterator();iter.hasNext();){
elItems.addContent(iter.next().toXml());
}
elOrder.addContent(elItems);
returnelOrder;
}
(3)从JDOM元素生成XML响应
publicvoiddoGet(HttpServletRequestreq,HttpServletResponseres)
throwsjava.io.IOException,ServletException
{
StringcustId=req.getParameter("username");
Customercustomer=getCustomer(custId);
ElementresponseElem=customer.toXml();
DocumentresponseDoc=newDocument(responseElem);
res.setContentType("application/xml");
newXMLOutputter().output(responseDoc,res.getWriter());
}
JDOM再次把工作变得非常简单。
只需要在对象图返回的XML元素外面包装一个Document,然后用XMLOutputter把文档写入servlet响应即可。
(4)代表顾客的XML文档
下面显示了用这种方式生成的XML示例,用JDOMFormat.getPrettyFormat()对XMLOutputter进行初始化,格式化得非常好。
在这个示例中,顾客只做了一个订单,包含两个商品。
xmlversion="1.0"encoding="UTF-8"?
>
ManufacturedbyOolongIndustries
shootingmodesand3xopticalzoom.Silver.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 级联 菜单 Struts