Ajax实现放大镜功能说明书

Ajax实现放大镜功能说明书[日期：2007-03-28]来源：25175.com作者：未知阅读：377次[字体：大中小]poweredby25175.netAjax实现放大镜功能说明书概述1.1放大镜功能介绍在软通的软件项目中，放大镜功能使用频率非常高，由于其友好的界面设计和操作性能，对用户和设计开发人员都有很大的吸引力，但存在开发效率低，复用性差，复杂度较高等问题。所谓放大镜功能，就是页面上的放大镜图标，点击图标，根据页面上元素的值为条件，到后台查询结果，然后把查询结果显示到弹出的窗口，选择后自动关闭弹出的窗口，并把你选择的有关内容显示到父页面中指定的元素中。1.2Ajax现状和项目实践随着Ajax的风靡全球，Google的推波助澜，优秀的界面风格，局部刷新的全新感受，给人耳目一新的印象。但由于Ajax诸多javascript脚本和后台应用的复杂性，使ajax的推广困难重重，国内的应用大多都是玩具级，距项目实用还有不小的差距，包括Microsoft，IBM，SUN都在积极攻关研发，以提高项目开发的实用性，降低开发难度。为了使用ajax在项目的实用性，针对放大镜功能的Ajax做了一些有益的尝试，特别愿意和大家分享。1.3Ajax简介Ajax是AsynchronousJavaScriptandXML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用，它包括：Ø使用XHTML和CSS标准化呈现Ø使用DOM实现动态显示和交互Ø使用XML和XSLT进行数据交换与处理Ø使用XMLHttpRequest进行异步数据读取;Ø使用JavaScript绑定和处理所有数据Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。2Ajax放大镜功能设计理念放大镜功能设计的的Ajax的设计主要集中在从前台的jsp页面提出Ajax请求，所有的Ajax请求都提交给放大镜中间层，放大镜中间层自动创建放大镜具体实现类来实现放大镜的具体查询功能，放大镜具体实现类实现数据库查询并组织传回前台数据文本。传到前台后自动选择不同的JavaScript函数来解析数据，并显示到页面的Div或者直接显示到页面元素中。3Ajax实现详述3.1Jsp前台在Jsp中，点击放大镜图标，则显示如图3-1界面，Ajax从后台获取数据显示在前台页面上方，但此时页面并未刷新。当点击所要选择的项目后，则相关内容填充到具体的页面元素中，如图3-2。图3-1图3-2具体代码如下：3.1.1引入js，css文件3.1.1.1Js文件内容：varxmlHttp;functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject(Microsoft.XMLHTTP);}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}functionoperationRequest(queryString){//设置url，统一由放大镜Servlet接收varurl=/myapp/AjaxMaginfier?+queryString;createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open(GET,url,true);xmlHttp.send(null);}//获得界面元素functiongetElement(idString){return(document.all?document.all[idString]:document.getElementById(idString));}//鼠标移动functionrollover(tdObject){tdObject.bgColor='#CCFF99';}functionrollout(tdObject){tdObject.bgColor='';}3.1.1.2Css文件内容：/*界面样式*/*{}form{margin:0;}#termFrame{width:298px!important;width:300px;margin-top:1px!important;margin-top:0;border:1pxsolid#999999;background-color:#FFFFCC;position:absolute;}#termFrametd{font-size:70%;padding:2px;cursor:hand;}#termFrame.rs{color:#339900;float:right;}#termFramea{text-decoration:none;display:block;color:#000000;}#q{font-size:75%;padding:2px;width:300px;border:1pxsolid#666666;}#go{font-weight:bold;font-size:75%;border:1pxoutset;background-color:#CCFF99;}.notice{background-color:#FFFFCC;padding:10px;font-size:90%;}.copyleft{font-size:65%;}3.1.2当点击放大镜图标时：varoperateType;functionajaxRequest(){//写入具体放大镜实现类名称，和操作类型。queryString=maginfierClassName=MaginfierExample&operation=select1;//设置Javascript的操作类型，为传回数据后由哪个具体Javascript函数处理operateType=select1;operationRequest(queryString);}3.1.3Js中的处理请求的函数functionoperationRequest(queryString){varurl=/myapp/AjaxMaginfier?+queryString;createXMLHttpRequest();//指定传回数据后由handleStateChange函数处理。xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open(GET,url,true);xmlHttp.send(null);}3.1.4当数据传回前台后//该函数的名称不要改变，因为我在js文件中决定了用该函数来处理传回的数据functionhandleStateChange(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){//根据操作类型，选择不同的Javascript方法处理。if(operateType==select1){selMaker();}elseif(operateType==select2){getMessage();}}}}3.1.5具体处理传回的数据：functionselMaker(){//获取从后台传来的文本。varresponseText=xmlHttp.responseText;//解析文本varrows=responseText.split(;);varoption=null;var_t=[];var_tx=[];varcols;varpos=\'+'test1'+','+'test2'+\';for(vari=0;irows.length;i++){cols=rows[i].split(,);values=\'+cols[0]+','+cols[1]+\';//处理每行显示数据_t[i]=''+cols[0]+''+cols[1]+'';}//找出要显示数据的Div_termFrame=getElement('selMake');//把所有数据行显示到Div中_termFrame.innerHTML=''+_t.join('')+'';//显示结果_termFrame.style.display='block';//隐藏父页面中Div遮挡的Select元素，避免下面的Select元素优先显示getElement('models').style.visibility=hidden;_termFrame.style.visibility=visible;}3.2Servlet后台选择Servlet作为后台，是因为如果采用StrutsAction为后台处理程序，则必须指定要返回的页面。而使用Servlet则没有这个要求。默认返回到请求页面。而这个放大镜Servlet接受所有的放大镜请求，根据前台传来的放大镜实现类名称参数，由Spring创建放大镜实现类对象，该对象实现了放大镜接口（MaginfierInterface），从而获取返回值文本。返回到前台。3.2.1具体代码如下：3.2.1.1放大镜ServletpublicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//获取从前台传来的放大镜具体实现类名称StringmaginfierClassName=request.getParameter(maginfierClassName);//调用Web.xml文件中初始化的Spring上下文容器ApplicationContextappContext=WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());//使用Spring容器创建放大镜具体实现类MaginfierInterfacemaginfier=(MaginfierInterface)appContext.getBean(maginfierClassName);//设置Response编码为中文response.setContentType(text/xml;charset=GBK);PrintWriterout=response.getWriter();//获取放大镜的返回值StringretValue=maginfier.getReturnValue(request);//把返回值文本写回到前台out.write(retValue);System.out.println(ret=+retValue);out.close();}3.2.1.2Web.xml配置3.2.1.2.1在Ｗｅｂ．ｘｍｌ中配置放大镜AjaxMaginfiercom.iss.fs.web.module.example.AjaxMaginfier在系统初次启动时，初始化1次--1AjaxMaginfier/AjaxMaginfier3.2.1.2.2在Ｗｅｂ．ｘｍｌ中配置SpringBean管理容器contextorg.springframework.web.context.ContextLoaderServlet在系统初次启动时，初始化1次--1contextConfigLocation/WEB-INF/beans.xml3.2.1.3在bean.xml中配置放大镜具体实现类。。。。。。3.2.1.4放大镜具体实现类3.2.1.4.1实现放大镜接口方法publicStringgetReturnValue(HttpServletRequestrequest){StringretStr=;//因为每