第第8章章 AJAX用户注册用户注册8.1 开发步骤开发步骤8.2 Ajax入门入门 第第8章章 AJAX用户注册用户注册常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而作出注册的成功和失败的提示。这样操作，对于用户来说不方便。一个好的用户体验应该是：当用户输入完注册用户名后，Web系统能即时检查并显示，并在检查和显示的同时不影响当前页面的操作。这就是“异步获取数据”的要求，而这是Ajax能够完成的。本章将通过Ajax技术对用户注册模块进行修改。效果如图8-1所示。图图8-1 Ajax用户注册用户注册8.1 开发步骤开发步骤 开发的步骤:(1) 配置DWR步骤1：下载装载dwr.jar步骤2：配置web.xml(2) 开发程序步骤3：DAO步骤4：Service步骤5：JSP步骤6：配置dwr.xml具体操作如下:步骤步骤1 下载dwr.jar文件从http:/getahead.ltd.nk/dwr下载dwr.jar(版本为2), 加入dwr.jar到bookstore工程中步骤步骤2配置web.xml配置web.xml，代码如下：8.1 开发步骤开发步骤步骤步骤3 DAO本层主要的类是IUserDAO，接口的exitUser方法定义是否已经存在这个用户。UserDAO实现这个方法。如图8-2所示。图图8-2 DAO主要类图主要类图8.1 开发步骤开发步骤文件在项目中的位置如图8-3所示。图图8-3 文件在项目中的位置文件在项目中的位置8.1 开发步骤开发步骤IUserDAO.java代码如下：package org.apex.bookstore.dao;import org.apex.bookstore.vo.User;public interface IUserDAO public void saveUser(User user); public User validateUser(String username,String password); public boolean exitUser(String username);UserDAO.java代码如下：8.1 开发步骤开发步骤步骤步骤4：ServiceService层主要的类为IUserService接口，定义了exitUser()方法，用于验证是否已经存在这个用户。UserService实现了这个接口。如图8-4所示。图图8-4 Service主要接口主要接口8.1 开发步骤开发步骤 文件在项目中的位置如图8-5所示。图图8-5 文件在工程中的位置文件在工程中的位置8.1 开发步骤开发步骤IUserService.java代码如下：package org.apex.bookstore.service;import org.apex.bookstore.vo.User;public interface IUserService public void saveUser(User user); public User validateUser(String username,String password); public boolean exitUser(String username);UserService.java代码如下：package org.apex.bookstore.service.impl;import org.apex.bookstore.dao.IUserDAO;import org.apex.bookstore.service.IUserService;import org.apex.bookstore.vo.User;public class UserService implements IUserService private IUserDAO userDAO;8.1 开发步骤开发步骤public IUserDAO getUserDAO() return userDAO;public void setUserDAO(IUserDAO userDAO) this.userDAO=userDAO;public void saveUser(User user) this.userDAO.saveUser(user);public User validateUser(String username,String password) return userDAO.validateUser(username, password);public boolean exitUser(String username) return userDAO.exitUser(username);8.1 开发步骤开发步骤步骤步骤5 JSP修改register.jsp注册页面，文件在项目中的位置如图8-6所示。图图8-6 文件在工程中的位置文件在工程中的位置8.1 开发步骤开发步骤register.jsp代码如下： 用户注册 function show(boolean) if(boolean) Alter(“用户已经存在用户已经存在!”); function validate() var name=form1.username.value; UserDAOAjax.exitUser(name,show);8.1 开发步骤开发步骤 用户名: 用户名已被注册 密码: 8.1 开发步骤开发步骤步骤步骤6 配置dwr.xmldwr.xml在项目中的位置如图8-7所示。图图8-7 dwr配置文件的位置配置文件的位置8.1 开发步骤开发步骤 8.1 开发步骤开发步骤creator属性是必须的,它用来指定使用哪种创造器默认情况下,有8种创造器.它们是： new:用Java的new关键字创造对象 none:不创建对象 scripted:通过BSF使用脚本语言创建对象 spring:通过Spring框架访问Bean jsf:使用JSF的Bean struts:使用Struts的FormBean pageflow:访问Beehive或Weblogic的PageFlow javascript属性:用于指定浏览器中这个被创造出来的对象的名称. param元素:指定创造器的其他参数,每种构造器各有不同.例如,”new”构造器需要知道创建的对象是什么类型.每个创造器的参数在各自的文档中能找到8.2 AJAX入门入门8.2.1 Asynchronouse JavaScript+XMLAjax这个名词由Jesse James Garrett提出,在他发表的Ajax：A New Approach to Web Applications这篇文章中谈到Google Suggest与Goolge Maps所使用到的技术，是他们在Adaptive Path中称之为Ajax的新方法。在文章中，Ajax是Asynchronous JavaScript+XML的简称，指出了Ajax的核心观念（Asynchronous）与所用到的主要两个技术（JavaScript，XML）。Asynchronous为非同步，要了解Ajax，需要先了解为何要非同步。现在许多应用程序都是在Web上建立的。但是，Web却也成为限制Web应用程序发展的因素。限制的原因来自于网络延迟的不确定性，网络连接是耗费资源的行为，程序必须序列化，通讯协议沟通，路由传输等动作。这些动作都很浪费时间和资源。Web应用程序中，通常通过表单进行资料提交，在同步的情况下，使用者发送表单之后，就只能等待服务器回应，在这段时间内，使用者无法作进一步的操作。如图8-8所示。8.2.1 ASYNCHRONOUSE JAVASCRIPT+XML序列化通讯协议实体传送通讯协议序列化图图8-8 同步技术同步技术8.2.1 ASYNCHRONOUSE JAVASCRIPT+XML图图8-9 非同步技术非同步技术8.2.2 XML HTTPREQUEST在Ajax应用程序中，如果是Mozilla/Firefox/Safari中，可以通过XMLHttpRequest来发送非同步请求，如果在IE 6或者之前的版本，则是使用ActiveXObject来发送非同步请求，为了各个不同浏览器的兼容性，必须进行测试取得XMLHttpRequest或ActiveXObjeect，例如。var xmlHttp;function createXMLHttpRequest() if(window.XMLHttpRequest)/如果可以取得XMLHttpRequest xmlHttp=new XMLHttpRequest(); /Mozilla,Firefox,Safari else if(window.ActiveXObject)/如果可以取得ActiveXOject xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);/Internet Exploerer 8.2.2 XML HTTPREQUEST在建立XMLHttpRequest之后，则可以使用以下几种方法： void open() 开启对服务器的连接 void send() 对服务器传送请求 void setRequestHeader() 为HTTP请求设定一个给定的header设定值 void abort()用来中断请求 string getAllReponseHeaders() 传回一个字串 string getResponseHeaders():传回一个字串一个基本的Ajax请求可以是以下片段：function startRequest() createXMLHttpRequest();/建立非同步请求组件 xmlHttp.onreadystatechange=handleStateChange;/设定callback函数 xmlHttp.open();/开启连接 xmlHttp.send(null);/传送请求function handleStateChange()/在这里处理非同步回应8.2.2 XML HTTPREQUEST在Web应用中，通常通过FORM提交或者连接请求的方式与服务器交互，这种方式总有一个请求和相应的过程，这个过程总是要刷新页面，既浪费网络带宽资源又影响用户体验。在很多场合需要不断刷新页面，比如需要连续多次提交请求，这种刷新会严重影响用户的感受。有没有一种方法不刷新页面而完成数据提交或者数据请求呢？Ajax技术就是解决这个问题的答案。Ajax使Web应用看上去好像传统窗口应用软件那样立即响应，没有提交，等待，刷新的过程。Ajax是利用浏览器与服务器之间的一个通道来“暗中”完成数据提交或者请求的。具体的方法是页面的脚本程序通过浏览器提供的空间完成数据的提交和请求，并将返回的数据由JavaScript处理后展现到页面上。整个过程是由浏览器，JavaScript、HTML共同完成。Ajax是这样一组技术的总称。不同的浏览器对Ajax有不同的支持方法，而对于Web服务器来说没有任何变化，因为浏览器和服务器之间的这个隧道依然是基于HTTP请求和响应的，浏览器正常的请求和Ajax请求对于Web服务器来说没有任何区别。图8-10说明了Ajax的请求和响应过程。8.2.2 XML HTTPREQUESTXMLHTTP对象网页JavaScriptURL152 1423浏览器服务器图图8-10 Ajax的请求和响应过程的请求和响应过程8.2.2 XML HTTPREQUESTAjax的请求和响应过程：（1） 网页调用JavaScript程序（2）JavaScript利用浏览器提供的XMLHTTP对象向Web服务器发送请求。（3）请求的URL资源处理后返回结果给浏览器的XMLHTTP对象。（4）XMLHTTP对象调用实现设置的处理方法。（5）JavaScript方法解析返回的数据,利用返回的数据更新页面。创建的对象是什么类型，每个创造器的参数在各自的文档中能找到。8.2.3 基于基于AJAX的用户注册实例的用户注册实例用户填写注册信息时，在不提交到服务器的情况下，判断用户名是否被注册并告之用户。Ajax的无刷新机制使得注册系统中对于注册名称能即时显示，如果用户名已经存在，则即使通知用户更换名称。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功和失败的提示。这样操作，对于用户来说是不方便的。一个好的用户体验应该是：当用户输入完注册用户名后，Web系统能即时检查并显示，并在检查和显示的同时不影响当前页面的操作。这就是“异步获取数据”的要求，而这是Ajax能够完成的。首先定义XMLHttp对象var xmlHttp=false;xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);自定义函数。这个函数的主要功能是异步获得cu.jsp的内容。在此之前将先提取当前页表单元素”u_name”即用户名文本框的值，通过cu.jsp其后的参数即赋值而得到不同的结果。function callServer() var u_name=document.getElementById(”username”).value;/从网页得到用户输入的用户名 var url=”cu.jsp?name=”+escape(u_name); xmlHttp.open(”GET”,url,true); xmlHttp.onreadystatechange=updatePage; xmlHttp.send(null);8.2.3 基于基于AJAX的用户注册实例的用户注册实例cu.jsp的主要功能就是接收URL参数name的值做内容显示，该内容最终被t1.html异步获取。cu.jspnam=request.querystirng(”name”);/获得name的值/连接数据库查看是否有该用户, 如果有返回true,如果没有返回false将异步获取的信息显示在当前页。function updatePage() test1.innerHTML=xmlHttp.responseText;8.2.4 AJAX集成技术：集成技术：DWR 对于程序员来说，现在需要掌握JavaScript脚本来操作数据。但是，相对于Java、JavaScript语言无论在面向对象还是数据操作等方面都很弱。值得高兴的是，针对Ajax，在J2EE领域出现不少解决方案，如：DWR、AjaxAnywher JSON-RPC-Java等等。DWR是开源框架，类似于Hibernate。借助于DWR，开发人员无需具备专业的javascript知识就可以轻松实现ajax使得ajax更加“平民化”。DWR的工作原理就是通过动态地把JAVA对象动态地生成为JavaScript对象，使得客户端通过脚本就能够访问到服务器对象。DWR大大简化了编写ajax的工作量。DWR是一个可以创建AJAX WEB站点的Java开源库。它可以让使用者在浏览器中的Javascript代码调用Web服务器上的Java代码，就像Java代码就在浏览器中一样。DWR包含2个主要部分：（1） 一个运行在服务器段的Java Servlet，它处理请求并且向浏览器发送响应。（2） 运行在浏览器段的JavaScript，它发送请求而且还能动态更新网页。DWR工作原理是通过动态把Java类生成为JavaScript。它的代码就像Ajax一样，感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。这种从Java到JavaScript的远程调用功能的方式使DWR用起来有些像RMI或者SOAP的常规RPC机制，而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。Java从根本上将是同步机制，然而Ajax却是异步的。所以调用远程方法时，当数据已经从网络返回的时候，要提供有反调（callback）功能的DWR。如图8-11所示。8.2.4 AJAX集成技术：集成技术：DWR图图8-11 DWR原理原理8.2.4 AJAX集成技术：集成技术：DWRDWR动态在JavaScript里生成一个AjaxService类，去匹配服务器端的代码。由evenHandler去调用它。然后DWR处理所有的远程细节，包括所有的参数以及返回JavaScript和Java的值。在示例中，现在evenHandler方法里调用AjaxServie的getOptions()方法，然后通过反调(callback)方法poplulateList(data)得到返回的数据，其中data就是String”1”, ”2”, ”3”，最后再使用DWR utility把data加入到下拉列表。习题习题1 使用Ajax完成更改用户注册模块。