ajax与java使用实例,AJAX在Java+Web中的应用实例

《AJAX在Java+Web中的应用实例》由会员分享，可在线阅读，更多相关《AJAX在Java+Web中的应用实例(12页珍藏版)》请在人人文库网上搜索。

1、AJAX在Java Web中的应用实例AJAX在Java Web中的实际应用：实例一：会员注册唯一性检查TestAjax1实例二：动态更新下拉列表TestAjaxXml6实例三：刷新页面局部内容(TestAjaxUpdateCounter)7实例四：交互式电子相册(TestAjaxPhoto)9实例五：访问Web服务(TestAjaxWebService)11实例六：创建工具提示(TestAjaxTool)12实例一：会员注册唯一性检查TestAjax会员注册唯一性检查的业务逻辑由一个名为CheckUser.java(见例程1)的HttpServlet来实现，CheckUser在web.xml。

2、中配置(见例程2)，然后在会员注册页index.htm(见例程3)中使用AJAX技术异步调用CheckUser完成会员注册有效性的检查。操作步骤如下：1. 首先，创建一个Web工程TestAjax，步骤如下图所示：2. 然后，创建一个index.htm页面，在index.htm中放置一个表单用于提交验证数据，见例程3。例程3使用AJAX技术的测试页面index.htm注册用户唯一性检查/定义一个变量用于存放XMLHttpRequest对象var xmlHttp; /该函数用于创建一个XMLHttpRequest对象function createXMLHttpRequest() if (wind。

3、ow.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();/这是一个启动AJAX异步通信的方法function beginCheck()var tempLoginName = document.all.loginName.value;if (tempLoginName = )/如果尚未输入注册名alert(对不起，请您输入注册名!);return;/创建一个XMLHttpRequest对象crea。

4、teXMLHttpRequest();/将状态触发器绑定到一个函数xmlHttp.onreadystatechange = processor;/通过GET方法向指定的URL建立服务器的调用xmlHttp.open(GET, CheckUser?loginName=+tempLoginName);/发送请求xmlHttp.send(null);/这是一用来处理状态改变的函数function processor () /定义一个变量用于存放从服务器返回的响应结果var responseContext;if(xmlHttp.readyState = 4) /如果响应完成if(xmlHttp.sta。

5、tus = 200) /如果返回成功/取出服务器的响应内容responseContext = xmlHttp.responseText;/如果注册名检查有效if (responseContext.indexOf(true)!=-1)alert(恭喜您，该注册名有效！);elsealert(对不起，该注册名已被使用！);请输入用户名：3. 接下来，创建一个名为CheckUser.java(见例程1)的HttpServlet来处理从index.htm提交的请求，步骤如下图所示：例程1 CheckUser.javaimport java.io.IOException;import java.io.P。

6、rintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckUser extends HttpServlet public CheckUser() super();public void destroy() super.destroy();public void do。

7、Get(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException doPost(request,response);public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setContentType(text/html);PrintWriter out = response.ge。

8、tWriter();/这里假设已经注册过了四位用户String logined = admin,users,dywdyw,liubin;/接收从客户端提交的loginName参数String loginName=request.getParameter(loginName);/创建一个存放响应内容的字符串String responseContext = true;for(int i=0;i刷新页面的局部内容/定义一个变量用于存放XMLHttpRequest对象var xmlHttp; /该函数用于创建一个XMLHttpRequest对象function createXMLHttpRequest。

9、() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();/这是一个通过AJAX刷新统计图的方法function autoFlush()/创建一个日期变量和一个时间变量var tempTime = new Date();var tempParameter = tempTime.getTime();/创建一个XMLHttpRequest对象createXMLHttpReques。

10、t();/将状态触发器绑定到一个函数xmlHttp.onreadystatechange = processor;/这里放置一个时间型参数是为了让服务器知道这是一个新的请求xmlHttp.open(GET, UpdateCounter?rnd=+tempParameter);/发送请求xmlHttp.send(null);/处理从服务器返回的XML文档function processor() /定义一个变量用于存放从服务器返回的响应结果var result;if(xmlHttp.readyState = 4) /如果响应完成if(xmlHttp.status = 200) /如果返回成功/取出。

11、服务器返回的XML文档的所有counter标签的子节点result = xmlHttp.responseXML.getElementsByTagName(counter);/解析XML中的数据并更新统计图状态for(var i=0;i指标动态统计图指标一指标二指标三指标四指标五指标六4. 接下来创建一个名为UpdateCounter.java的HttpServlet用于提供实时统计数据。5. 在index.htm中创建AJAX脚本，实现每隔一秒就刷新统计图的功能。输入：http:/localhost:8080/TestAjaxUpdateCounter/index.htm实例四：交互式电子相册。

12、(TestAjaxPhoto)使用AJAX技术异步改变img标签的src的属性值实现交互式电子相册功能。在本实例中，最新的图片路径由一个名为GetPhoto(见例程10)的HttpServlet来提供。GetPhoto在web.xml中的配置见例程11，然后在测试页photo.htm(见例程12)中使用AJAX技术异步调用GetPhoto实现交互式电子相册功能。本节我们演示一下使用AJAX技术制作在线交互式电子相册：1. 首先创建一个photo文件夹存放我们的相片文件2. 为photo文件夹导入准备好的相片文件，步骤如下：3. 创建一个photo.htm的页面文件供用户欣赏相片4. 创建一个名。

13、为GetPhoto.java的HttpServlet文件为客户端提供相片。5. 在photo.htm中编写AJAX脚本实现交互式浏览。输入：http:/localhost:8080/TestAjaxPhoto/photo.htm实例五：访问Web服务(TestAjaxWebService)Web服务(Web Service)调用后返回的结果是一个标准的XML文档，在JavaScript中通过解析XML文档即可以特定的形式展现其结果。在本实例中，由一个名为YahooSearch(见例程13)的HttpServlet调用Yahoo搜索Web服务，YahooSearch在web.xml中配置见例程1。

14、4，然后在测试页search.htm(见例程15)中使用AJAX技术异步调用YahooSearch实现在线搜索功能。本节我们演示一下使用AJAX技术调用Yahoo的搜索Web Service实现在线搜索功能：1. Yahoo的搜索Web Service访问URL为：http:/api.search.yahoo.com/WebSearchService/V1/webSearch?appid=YahooDemo&ei=UTF-8&type=all;2. 我们先熟悉一下Yahoo的搜索Web Service返回的XML文档结构3. 我们的搜索关键字为IBM，共返回十条查询结果。下面我们正式开始本节的。

15、演示：1. 首先创建一个供用户使用的搜索页面index.htm；2. 导入并放置一个等待图标以提示用户搜索正在进行；3. 建立一个css样式用于格式化搜索结果的输出(用Dreamweaver建立，然后复制到index.htm中相应的位置)；4. 创建一个HttpServlet YahooSearch.java实现搜索功能；5. 在index.htm中编写AJAX脚本配合YahooSearch.java完成搜索。http:/localhost:8080/TestAjaxWebService/index.htm实例六：创建工具提示(TestAjaxTool)使用AJAX的一大优点就是可实现动态的工。

16、具提示，这样可节省初始化页面时的代码量，提高页面的渲染速度。只有在需要的时候，才通过异步通信从服务器端取回提示的内容。在本实例中，动态工具提示的内容由一个名为CreateTip(见例程16)的HttpServlet来提供，CreateTip在web.xml中配置见例程17，然后在测试页index.htm(见例程18)中使用AJAX技术异步调用CreateTip实现动态工具提示功能。下面我们正式开始本节的演示：1. 首先创建一个页面index.htm；2. 创建一个photo文件夹，来存放图片；3. 创建一个HttpServlet CreateTip.java实现搜索功能；4. 在index.htm中编写AJAX脚本配合CreateTip.java完成搜索。http:/localhost:8080/TestAjaxTool/index.htm。