AJAX在Java+Web中的应用实例

AJAX在JavaWeb中的应用实例AJAX在JavaWeb中的实际应用：实例一：会员注册唯一性检查TestAjax......................................................................................1实例二：动态更新下拉列表TestAjaxXml....................................................................................6实例三：刷新页面局部内容（TestAjaxUpdateCounter）.........................................................7实例四：交互式电子相册（TestAjaxPhoto）.............................................................................9实例五：访问Web服务（TestAjaxWebService）.....................................................................11实例六：创建工具提示（TestAjaxTool）.................................................................................12实例一：会员注册唯一性检查TestAjax会员注册唯一性检查的业务逻辑由一个名为CheckUser.java（见例程1）的HttpServlet来实现，CheckUser在web.xml中配置（见例程2），然后在会员注册页index.htm（见例程3）中使用AJAX技术异步调用CheckUser完成会员注册有效性的检查。操作步骤如下：1.首先，创建一个Web工程TestAjax，步骤如下图所示：2.然后，创建一个index.htm页面，在index.htm中放置一个表单用于提交验证数据，见例程3。例程3使用AJAX技术的测试页面index.htmhtmlheadtitle注册用户唯一性检查/titlemetahttp-equiv=content-typecontent=text/html;charset=gb2312/headscriptlanguage=javascript//定义一个变量用于存放XMLHttpRequest对象varxmlHttp;//该函数用于创建一个XMLHttpRequest对象functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject(Microsoft.XMLHTTP);}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}//这是一个启动AJAX异步通信的方法functionbeginCheck(){vartempLoginName=document.all.loginName.value;if(tempLoginName==){//如果尚未输入注册名alert(对不起，请您输入注册名!);return;}//创建一个XMLHttpRequest对象createXMLHttpRequest();//将状态触发器绑定到一个函数xmlHttp.onreadystatechange=processor;//通过GET方法向指定的URL建立服务器的调用xmlHttp.open(GET,CheckUser?loginName=+tempLoginName);//发送请求xmlHttp.send(null);}//这是一用来处理状态改变的函数functionprocessor(){//定义一个变量用于存放从服务器返回的响应结果varresponseContext;if(xmlHttp.readyState==4){//如果响应完成if(xmlHttp.status==200){//如果返回成功//取出服务器的响应内容responseContext=xmlHttp.responseText;//如果注册名检查有效if(responseContext.indexOf(true)!=-1){alert(恭喜您，该注册名有效！);}else{alert(对不起，该注册名已被使用！);}}}}/scriptbodyformname=form1action=CheckUsermethod=post请输入用户名：inputname=loginNametype=textid=loginNameinputname=checkLoginNamevalue=有效性检查onclick=beginCheck()type=button/form/body/html3.接下来，创建一个名为CheckUser.java（见例程1）的HttpServlet来处理从index.htm提交的请求，步骤如下图所示：例程1CheckUser.javaimportjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;publicclassCheckUserextendsHttpServlet{publicCheckUser(){super();}publicvoiddestroy(){super.destroy();}publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doPost(request,response);}publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType(text/html);PrintWriterout=response.getWriter();//这里假设已经注册过了四位用户String[]logined={admin,users,dywdyw,liubin};//接收从客户端提交的loginName参数StringloginName=request.getParameter(loginName);//创建一个存放响应内容的字符串StringresponseContext=true;for(inti=0;ilogined.length;i++){//遍历已注册用户列表，如果发现提交的注册名已存在，则修改响应内容if(loginName.equals(logined[i]))responseContext=false;}//将处理结果返回给客户端out.println(responseContext);out.flush();out.close();}publicvoidinit()throwsServletException{}}4.最后在index.htm中加入AJAX通信代码，实现与服务端的异步通信。输入：实例二：动态更新下拉列表TestAjaxXml动态更新下拉列表可增强Web应用的交互性，因此应用相当广泛。在本实例中，下拉列表的动态数据由一个名为CreateXML(见例程4)的HttpServlet来提供，CreateXML在web.xml中配置见(见例程5)，然后在测试页index.htm(见例程６)中使用AJAX技术异步调用CreateXML完成下拉列表的动态更新。实例三：刷新页面局部内容（TestAjaxUpdateCounter）在刷新页面局部内容方面，没有什么比AJAX技术更具吸引力。本实例中，最新的页面局部内容由一个名为UpdateCounter(见例程7)的HttpServlet来提供，UpdateCounter在web.xml中的配置见例程8，然后在测试页counter.htm(见例程9)中使用AJAX技术异步调用UpdateCounter完成页面局部内容的刷新。本节演示通过AJAX刷新页面的局部内容，本实例是模拟一个某指标的动态统计图：1.首先建立一个images文件夹用于存放六个条形统计图的图片文件，步骤如下：2.然后在images文件夹下创建六个图片文件bar0.gif…bar5.gif3.然后新建一个页面index.htm并创建其页面内容如下：htmlheadtitle刷新页面的局部内容/titlemetahttp-equiv=content-typecontent=text/html;charset=gb2312/headscriptlanguage=javascript//定义一个变量用于存放XMLHttpRequest对象varxmlHttp;//该函数用于创建一个XMLHttpRequest对象functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject(Microsoft.XMLHTTP);}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}//这是一个通过AJAX刷新统计图的方法functionautoFlush(){//创建一个日期变量和一个时间变量vartempTime=newDate();vartempParameter=tempTime.getTime();//创建一个XMLHttpRequest对象createXMLHttpRequest();//将状态触发器绑定到一个函数xmlHttp.onreadystatechange=processor;//这里放置一个时间型参数是为了让服务器知道这是一个新的请求xmlHttp.open(GET,UpdateCounter?rnd=+tempParameter);//发送请求xmlHttp.send(null);}//处理从服务器返回的XML文档functionprocessor(){//定义一个变量用于存放从服务器返回的响应结果varresult;if(xmlHttp.readyState==4){//如果响应完成if(xmlHttp.status==200){//如果返回成功//取出服务器返回的XML文档的所有counter标签的子节点result=xmlHttp.responseXML.getElementsByTagName(counter);//解析XML中的数据并更新统计图状态for(vari=0;iresult.length;i++){//用相应的统计数据更新统计图片的状态document.getElementById(bar+i).height=result[i].childNodes[0].nodeValue;}}}}//每隔一秒就执行一次autoFlush方法setInterval(autoFlush();,1000);/scriptbodyTABLEborder=0bgcolo