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

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 StringBuilde

4、r();builder.append("<message>"); builder.append("</message>");out.println(builder.toString();后面就是接收方法了，实际上也没有太大区别，就是接收的是xml语句，我们需要解析后就可以一样使用了。（具体实现请参考网上提供的教程或者我提供下载的代码）/例1：简单的使用AJAX，返回的数据是html/定义用户名校验的方法function verify() /首先测试一下页面的按钮按下，可以调用这个方法 /使用javascript的alert方法，显

5、示一个探出提示框 /alert("按钮被点击了！"); /1.获取文本框中的内容 /document.getElementById("userName"); dom的方式 /Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点。 /jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 var jqueryObj = $("#userName"); /获取节点的值 var userName = jqueryObj.val(); /alert(userName); /2.将文本框中的数据

6、发送给服务器段的servelt /使用jquery的XMLHTTPrequest对象get请求的封装 $.get("AJAXServer?name=" + userName,null,callback);/回调函数function callback(data) / alert("服务器段的数据回来了！"); /3.接收服务器端返回的数据/ alert(data); /4.将服务器段返回的数据动态的显示在页面上 /找到保存结果信息的节点 var resultObj = $("#result"); /动态的改变页面中div节点中的内容re

7、sultObj.html(data);/* *Servlet，用于验证用户名的*/public class AJAXServer extends HttpServlet protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException doGet(httpServletRequest, httpServletResponse); protected void doGet(HttpSer

8、vletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException try/ request.setCharacterEncoding("UTF-8");/ response.setContentType("text/html;charset=gb18030"); httpServletResponse.setContentType("text/html;charset=utf-8")

9、; PrintWriter out = httpServletResponse.getWriter(); Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total"); int temp = 0; if (inte = null) temp = 1; else temp = Value() + 1; httpServletRequest.getSession().setAttribute("total",temp); /1.取参数 String

10、 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.println("用户名不能为空"); else/ String name = URL

11、Decoder.decode(old,"UTF-8");/ 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。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一

12、个新的页面发送给用户 /写法没有变化，本质发生了改变 out.println("用户名" + name + "已经存在，请使用其他用户名, " + temp); else out.println("用户名" + name + "尚未存在，可以使用该用户名注册, " + temp); catch(Exception e) e.printStackTrace(); AJAX还有一个比较重要那就是XMLHttpRequest。下面给出例2. 使用XMLHttpRequest进行用户名验证，其中xmlHttpRequest

13、考虑了多中浏览器的兼容问题。这些一般也就是一个套路了，以后也就没有必要再写创建XMLHttpRequest对象的代码了，这些都可以进行复用（软件工程的思想）后面实际上也要考虑Servlet传回来的数据的类型（html的文本格式还是xml格式的），这里就不再详述了。/例2.使用XMLHttpRequest进行用户名验证/用户名校验的方法/这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互var xmlhttp;function verify() /0。使用dom的方式获取文本框中的值 /document.getElementById("userName"

14、;)是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input> /。value可以获取一个元素节点的value属性值 var userName = document.getElementById("userName").value; /1.创建XMLHttpRequest对象 /这是XMLHttpReuquest对象无部使用中最复杂的一步 /需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 if (window.XMLHttpRequest) /针对FireFox，Mozillar，Opera，Safari，I

15、E7，IE8 xmlhttp = new XMLHttpRequest(); /针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType("text/xml"); else if (window.ActiveXObject) /针对IE6，IE5.5，IE5 /两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中 /排在前面的版本较新 var activexName = "MSXML2.XMLHTTP","

16、Microsoft.XMLHTTP" for (var i = 0; i < activexName.length; i+) try /取出一个控件名进行创建，如果创建成功就终止循环 /如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建 xmlhttp = new ActiveXObject(activexNamei); break; catch(e) /确认XMLHTtpRequest对象创建成功 if (!xmlhttp) alert("XMLHttpRequest对象创建失败!"); return; else alert(xmlhttp.read

17、yState); /2.注册回调函数 /注册回调函数时，之需要函数名，不要加括号 /我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的 xmlhttp.onreadystatechange = callback; /3。设置连接信息 /第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post /第二个参数表示请求的url地址，get方式请求的参数也在url中 /第三个参数表示采用异步还是同步方式交互，true表示异步 xmlhttp.open("GET","AJAXServer?name="+ user

18、Name,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这句话会在

19、服务器段数据回来后才执行完 /异步方式下，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标签所

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

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

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

23、入的。下面介绍在Servlet（或者Filter，或者Listener）中使用spring的IOC容器默认情况下Servlet容器创建spring容器对象，注入到servletContext中，servletContext对象又是注入到session对象中，session对象又是注入到request对象中，request对象又是注入到servlet对象中，（其实不是很标准的注入，是传参数，或者对属性直接付值）。层层依赖可以得到spring容器对象。ServletContext   servletContext   =   request.getSession().

24、getServletContext();           ApplicationContext   ctx   =   WebApplicationContextUtils.getWebApplicationContext(servletContext   ); UsersManager   um   =   (UsersManager)ctx.getBean( "UserManager");2. 验证码如何生成验证码的生成网上的代

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