SSH整合AJAX验证用户名存在和验证码的完整实例

《SSH整合AJAX验证用户名存在和验证码的完整实例》由会员分享，可在线阅读，更多相关《SSH整合AJAX验证用户名存在和验证码的完整实例（9页珍藏版）》请在装配图网上搜索。

1、SSH整合AJAX验证用户名存在和验证码的完整实例一(含代码)AJAX 学习笔记SSH 三大框架如何整合，在我前几篇博文中已经很详细的介绍了，如果还有什么问题的， 请查看我的博文Struts+Spring+Hibernate整合注册登录，谢谢。那么现在就详细地介绍一下AJAX 了。AJAX自己也是最近才学了一点，里面的一些框架 或者知识只是略懂一些，写的不好请大家原谅。下面是一个简单的使用AJAX进行验证用户名的，一般AJAX给人感觉的好处就是异步进 行交互，让我们感觉页面并没有其他的动作(刷新)，还有一个我感觉就是屏蔽了以前很恼 人的alert弹出框了(这种验证在以前真的很多)，让我们感觉页

2、面做的更友好了，交互性更 能跟上现在的 web 应用。有人会说，Struts中不是有服务器端验证码，而且给人的交互也是很好的，那为什么还 需要AJAX进行验证了？以我的经验和爱好的话说，我觉得服务器端和客户端的验证都必须 要，这个有的时候是为了防止别人进行恶意的网址注入，也许现在我们做了更完善的验证的 话，以后我们的网站就少了很多不必要的恶意破坏。好了，现在就来说说下面的AJAX技术了，下面的例1,是一个很简单用户名验证存在 的验证js和Servlet，实际上是没有技术含量的，其中返回的数据就可能有两种了，一种以 html的格式，另一种就是xml 了，例1给的是html格式的，xml的格式的代

3、码就不贴了， 说一下了。有两个修改点了，修改点1-响应的Content-Type必须是text/xml httpServletResponse.setContentType(text/xml;charset=utf-8);修改点2-返回的数据需要拼装成xml格式PrintWriter out = httpServletResponse.getWriter(); String old = httpServletRequest.getParameter(name);修改点2-返回的数据需要拼装成xml格式StringBuilder builder = new StringBuilder(); bu

4、ilder.append();builder.append(); out.println(builder.toString();后面就是接收方法了，实际上也没有太大区别，就是接收的是xml语句，我们需要解析 后就可以一样使用了。(具体实现请参考网上提供的教程或者我提供下载的代码)/例1：简单的使用AJAX，返回的数据是html/定义用户名校验的方法function verify()/首先测试一下页面的按钮按下，可以调用这个方法使用javascript的alert方法，显示一个探出提示框/alert(按钮被点击了！ ”)；/1.获取文本框中的内容 /document.getElementById

5、(userName); dom 的方式/Jquery 的查找节点的方式，参数中#加上 id 属性值可以找到一个节点。/jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 var jqueryObj = $(#userName);/获取节点的值var userName = jqueryObj.val(); /alert(userName);/2.将文本框中的数据发送给服务器段的 servelt/使用 jquery 的 XMLHTTPrequest 对象 get 请求的封装 $.get(AJAXServer?name= + userName,null,call

6、back);/回调函数function callback(data) /alertC服务器段的数据回来了！ ”)；/3.接收服务器端返回的数据/alert(data)；/4.将服务器段返回的数据动态的显示在页面上/找到保存结果信息的节点var resultObj = $(#result)；/动态的改变页面中 div 节点中的内容resultObj.html(data)；import javax.servlet.http.HttpServlet；import javax.servlet.http.HttpServletRequest；import javax.servlet.http.HttpS

7、ervletResponse；import javax.servlet.ServletException；import java.io.IOException；import java.io.PrintWriter；import .URLDecoder；/*Servlet，用于验证用户名的*/public class AJAXServer extends HttpServletprotected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Se

8、rvletException, IOException doGet(httpServletRequest, httpServletResponse)；protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException try/request.setCharacterEncoding(UTF-8);/response.setContentType(text/html;charset=gb18

9、030);httpServletResponse.setContentType(text/html;charset=utf-8); PrintWriter out = httpServletResponse.getWriter();Integer inte = (Integer) httpServletRequest.getSession().getAttribute(total); int temp = 0;if (inte = null) temp = 1; else temp = inte.intValue() + 1; httpServletRequest.getSession().s

10、etAttribute(total,temp);/1.取参数String old = httpServletRequest.getParameter(name); /String name = new String(old.getBytes(iso8859-1),UTF-8);String name = URLDecoder.decode(old,UTF-8); /2.检查参数是否有问题if(old = null | old.length() = 0)out.printlnC用户名不能为空”)； else/String name = URLDecoder.decode(old,UTF-8)；/

11、byte by = old.getBytes(ISO8859-1)；/String name = new String(by,utf-8)；/String name = URLDecoder.decode(old,utf-8)；/3.校验操作/String name = old；if(name.equals(wangxingkui) /4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给 页面段，而不是将一个新的页面发送给用户/写法没有变化，本质发生了改变out.println(用户名” + name + 已经存在，请使用其他用户名，+ temp)； elseout.println(用户

12、名+ name + 尚未存在，可以使用该用户名注册, + temp)； catch(Exception e)e.printStackTrace();AJAX还有一个比较重要那就是XMLHttpRequest。下面给出例2.使用XMLHttpRequest 进行用户名验证，其中xmlHttpRequest考虑了多中浏览器的兼容问题。这些一般也就是一个 套路了，以后也就没有必要再写创建XMLHttpRequest对象的代码了，这些都可以进行复用 (软件工程的思想)后面实际上也要考虑Servlet传回来的数据的类型(html的文本格式还 是 xml 格式的)，这里就不再详述了。例2.使用XMLHtt

13、pRequest进行用户名验证/用户名校验的方法这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互 var xmlhttp;function verify() /0。使用 dom 的方式获取文本框中的值document.getElementByld(userName)是dom中获取元素节点的一种方法，一个元素 节点对应HTML页面中的一个标签，如果卩皿。value可以获取一个元素节点的value属性值var userName = document.getElementByld(userName).value;1创建 XMLHttpRequest 对象这是XMLHttpR

14、euquest对象无部使用中最复杂的一步/需要针对 lE 和其他类型的浏览器建立这个对象的不同方式写不同的代码if (window.XMLHttpRequest) /针对 FireFox， Mozillar， Opera， Safari， lE7， lE8xmlhttp = new XMLHttpRequest();/针对某些特定版本的 mozillar 浏览器的 BUG 进行修正if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType(text/xml); else if (window.ActiveXObject) /针对 lE6， lE

15、5.5， lE5两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中 /排在前面的版本较新var activexName = MSXML2.XMLHTTP,Microsoft.XMLHTTP;for (var i = 0; i activexName.length; i+) try/取出一个控件名进行创建，如果创建成功就终止循环 /如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建 xmlhttp = new ActiveXObject(activexNamei);break; catch(e)/确认 XMLHTtpRequest 对象创建成功if (!xm

16、lhttp) alert(XMLHttpRequest 对象创建失败!);return; else alert(xmlhttp.readyState);/2.注册回调函数/注册回调函数时，之需要函数名，不要加括号 /我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的 xmlhttp.onreadystatechange = callback;/3。设置连接信息/第一个参数表示 http 的请求方式，支持所有 http 的请求方式，主要使用 get 和 post 第二个参数表示请求的url地址，get方式请求的参数也在url中 /第三个参数表示采用异步还是同步方式交互， t

17、rue 表示异步 xmlhttp.open(GET,AJAXServer?name=+ userName,true);/POST 方式请求的代码/xmlhttp.open(POST,AJAXServer,true);/POST 方式需要自己设置 http 的请求头 /xmlhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);/POST方式发送数据/xmlhttp.send(name= + userName);/4.发送数据，开始和服务器端进行交互/同步方式下， send 这句话会在服务器段数据回来后才执行完

18、/异步方式下， send 这句话会立即完成执行 xmlhttp.send(null);/回调函数function callback() /alert(xmlhttp.readyState);/5。接收响应数据/判断对象的状态是交互完成if (xmlhttp.readyState = 4) /判断 http 的交互是否成功if (xmlhttp.status = 200) /获取服务漆器端返回的数据 /获取服务器段输出的纯文本数据 var responseText = xmlhttp.responseText;/将数据显示在页面上/通过 dom 的方式找到 div 标签所对应的元素节点 var

19、divNode = document.getElementById（result）;设置元素节点中的html内容divNode.innerHTML = responseText; else alert（出错了！ ！ ！）；上面的都是AJAX的一些知识，本想后面就介绍如何使用AJAX整合SSH进行用户名（数 据库中取得）存在和验证码的例子，但介于博文字数的限制，就留到下一篇博文中了，请阅 读下一篇博文 SSH整合AJAX验证用户名存在和验证码的完整实例二，不好意思。本博文提供下载：博文的word原稿，AJAX使用的代码，AJAX + SSH进行用户名（数据库中取得）存在和 验证码的代码。如果有什

20、么问题和好的建议请与木子（QQ： 506817493）。木子写于2009年8 月7 日附源码下载：博文的 word 原稿AJAX 使用的代码AJAX + SSH 进行用户名（数据库中取得）存在和验证码的代码SSH 整合 AJAX 验证用户名存在和验证码的完整实例二(含代码)AJAX 学习笔记在上一篇博文(SSH整合AJAX验证用户名存在和验证码的完整实例一)中介绍了 AJAX 的一些技术问题，现在就来我们的实例：SSH整合AJAX验证用户名存在和验证码的完整实 例了。先介绍这个实例中我遇到的问题1. 用户名是从数据库中取得的，但是进行验证用户名是否存在的是个Servlet，这个时候就 会想到在

21、这个Servlet里建立一个Dao的对象对数据库的操作，而SSH整合的时候Spring 对Servlet注入对象的机制是不一样的。具体的情查看我写的博文：特殊情况(ActionForm, Servlet, Filter, Listener) 下 Spring 如何注入对象现在介绍一下再Servlet里如何通过Spring注入对象使用Servlet进行验证，这种思路很适合AJAX验证的思路，不过问题出现了，还是空指 针异常，Spring注入的对象根本没有实例化。一开始还以为和Servlet的生命周期有点关系， 后来在网上搜了一些东西，还是感觉可以通过Spring进行注入的。下面介绍在Servle

22、t (或者Filter，或者Listener)中使用spring的IOC容器默认情况下S ervlet容器创建spring容器对象，注入到servletContext中，servletContext对象又是注入到s ession 对象中， session 对象又是注入到 request 对象中， request 对象又是注入到 servlet 对 象中，(其实不是很标准的注入，是传参数，或者对属性直接付值)。层层依赖可以得到spr ing 容器对象。ServletContext servletContext = request.getSession().getServletContext();

23、ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(se rvletContext );UsersManager um = (UsersManager)ctx.getBean( UserManager);2. 验证码如何生成验证码的生成网上的代码比较多了，有js生成的还有Servlet生成的，在本例中我使用 了 Servlet 生成的一个验证码。生成验证码不难，但难的是如何进行验证码的验证了，一般 人想到的在生产验证码的Servlet中把生成的验证码加到session中，在通过jsp的判断，一

24、 开始我也是这样写的，不过后来就有问题了，什么问题了？那就是Javascript获取的验证码 和生成的验证码不同的？ session中的总是前一个显示的验证码？也就是jsp获取的验证码总 是比Servlet中获得的验证码慢一拍了，在网上搜了很多竟然没有完整的验证码验证的实例， 这应该是我写这篇博文的一个原因吧(希望对大家有帮助)网上的这个问题的解答大致是这样的，一个就是说这个是加载机制的问题， jsp 是在 Servlet前面进行的加载，所以说虽然生成图片的Servlet写人了 session，不过jsp总是慢一 拍了。另一个就是建议我们使用 AJAX 进行了。这个也是我实现的，不过网上并没有

25、太多的代 码供我们参考，我也就在用户名验证的基础上加了一个验证码的验证了。测试通过是可以。3. 在 Servlet 中验证的时候，会出现对多个字段的验证，象在我的这个例子中就有两个：用 户名存在验证和验证码验证，那么如何处理验证后的返回的信息了。解决办法那也只有用 AJAX 的 xml 数据格式了，可以通过解析获取不同的验证信息，这 样就可以验证多个字段了。不过这时应该有个技巧怎么样进行性能的优化了，不然每次一个 字段的验证都变成了所有字段的验证。我处理的时候就是在AJAX进行传值的时候只传需要 验证字段的值（在传值之前当然要用js进行一个非空验证了），这传到Servlet里，在通过判 断哪个

26、字段非空了，那这个时候就是验证这个字段了，其他空字段就用ifelse进行处理掉了。 应该还是可以节约一些性能的吧。如果有什么好的想法我们可以一起讨论了。谢谢。实例运行截图如下：:RegisterForm X.囲木子J臟博客刑 持殊情况下Actis,翎持殊情况下Actim.username : nihaomuzisu5emame not exist:you can use itpassword: * repassword: *verifycode: yokO Y 00#代码也就不贴了，后面会提供原代码下载的。下载发现一个问题就是下载的代码如何用 了。说一下我的环境吧一般我写的Java EE的代码

27、是在MyEclipse + MySql + Tomcat下的，只 需要这些环境就可以了，需要说明一点的是，博文中用的的Mysql数据库的sql文件我都会 提供给大家，大家只需导入就可以了，但还需注意一点的就是我的mysql数据库密码是和你 的不一样的，请大家修改Hibernate的配置文件修改为你自己的mysql用户root的密码。其他的就请把Project导入，再在tomcat发布应该就可以运行了。如果有什么问题请联系木子（ QQ：506817493）。木子写于2009年8 月7 日本博文提供下载：博文的word原稿，AJAX使用的代码，AJAX + SSH进行用户名（数据库中取得）存在和 验证码的代码。如果有什么问题和好的建议请与木子（QQ： 506817493）。附源码下载：博文的 word 原稿AJAX 使用的代码AJAX + SSH 进行用户名（数据库中取得）存在和验证码的代码