SSH整合AJAX验证用户名存在和验证码的完整实例一（含代码）

——AJAX学习笔记

         SSH三大框架如何整合，在我前几篇博文中已经很详细的介绍了，如果还有什么问题的，请查看我的博文Struts+Spring+Hibernate整合注册登录,谢谢。

         那么现在就详细地介绍一下AJAX了。AJAX自己也是最近才学了一点，里面的一些框架或者知识只是略懂一些，写的不好请大家原谅。

         下面是一个简单的使用AJAX进行验证用户名的，一般AJAX给人感觉的好处就是异步进行交互，让我们感觉页面并没有其他的动作（刷新），还有一个我感觉就是屏蔽了以前很恼人的alert弹出框了（这种验证在以前真的很多），让我们感觉页面做的更友好了，交互性更能跟上现在的web应用。

         有人会说，Struts中不是有服务器端验证码，而且给人的交互也是很好的，那为什么还需要AJAX进行验证了？以我的经验和爱好的话说，我觉得服务器端和客户端的验证都必须要，这个有的时候是为了防止别人进行恶意的网址注入，也许现在我们做了更完善的验证的话，以后我们的网站就少了很多不必要的恶意破坏。

         好了，现在就来说说下面的AJAX技术了，下面的例1，是一个很简单用户名验证存在的验证js和Servlet，实际上是没有技术含量的，其中返回的数据就可能有两种了，一种以html的格式，另一种就是xml了，例1给的是html格式的，xml的格式的代码就不贴了，说一下了。有两个修改点了，修改点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();

builder.append("<message>");

                       … …

builder.append("</message>");

out.println(builder.toString());

后面就是接收方法了，实际上也没有太大区别，就是接收的是xml语句，我们需要解析后就可以一样使用了。（具体实现请参考网上提供的教程或者我提供下载的代码）

 

//例1：简单的使用AJAX，返回的数据是html

//定义用户名校验的方法

function verify(){

    //首先测试一下页面的按钮按下，可以调用这个方法

    //使用javascript的alert方法，显示一个探出提示框

    //alert("按钮被点击了！！！");

 

    //1.获取文本框中的内容

    //document.getElementById("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,callback);

}

 

//回调函数

function callback(data) {

//    alert("服务器段的数据回来了！！");

    //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.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.PrintWriter;

import java.net.URLDecoder;

 

/**

 *Servlet，用于验证用户名的

*/

public class AJAXServer extends HttpServlet{

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        doGet(httpServletRequest, httpServletResponse);

    }

 

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        try{

//            request.setCharacterEncoding("UTF-8");

//            response.setContentType("text/html;charset=gb18030");

 

            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().setAttribute("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.println("用户名不能为空");

            } else{

//                String name = URLDecoder.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。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户

                    //写法没有变化，本质发生了改变

                    out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);

                } else{

                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);

                }

            }

        } catch(Exception e){

            e.printStackTrace();

        }

    }

}

 

         AJAX还有一个比较重要那就是XMLHttpRequest。下面给出例2. 使用XMLHttpRequest进行用户名验证，其中xmlHttpRequest考虑了多中浏览器的兼容问题。这些一般也就是一个套路了，以后也就没有必要再写创建XMLHttpRequest对象的代码了，这些都可以进行复用（软件工程的思想）后面实际上也要考虑Servlet传回来的数据的类型（html的文本格式还是xml格式的），这里就不再详述了。

 

//例2.使用XMLHttpRequest进行用户名验证

//用户名校验的方法

//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互

var xmlhttp;

function verify() {

    //0。使用dom的方式获取文本框中的值

    //document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input>

    //。value可以获取一个元素节点的value属性值

    var userName = document.getElementById("userName").value;

 

    //1.创建XMLHttpRequest对象

    //这是XMLHttpReuquest对象无部使用中最复杂的一步

    //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

 

    if (window.XMLHttpRequest) {

        //针对FireFox，Mozillar，Opera，Safari，IE7，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","Microsoft.XMLHTTP"];

        for (var i = 0; i < activexName.length; i++) {

            try{

                //取出一个控件名进行创建，如果创建成功就终止循环

                //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建

                xmlhttp = new ActiveXObject(activexName[i]);

                break;

            } catch(e){

            }

        }

    }

    //确认XMLHTtpRequest对象创建成功

    if (!xmlhttp) {

        alert("XMLHttpRequest对象创建失败!!");

        return;

    } else {

        alert(xmlhttp.readyState);

    }

 

    //2.注册回调函数

    //注册回调函数时，之需要函数名，不要加括号

    //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的

    xmlhttp.onreadystatechange = callback;

 

    //3。设置连接信息

    //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post

    //第二个参数表示请求的url地址，get方式请求的参数也在url中

    //第三个参数表示采用异步还是同步方式交互，true表示异步

    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这句话会在服务器段数据回来后才执行完

    //异步方式下，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 divNode = document.getElementById("result");

            //设置元素节点中的html内容

            divNode.innerHTML = responseText;

        } else {

            alert("出错了！！！");

        }

    }

}

 

         上面的都是AJAX的一些知识，本想后面就介绍如何使用AJAX整合SSH进行用户名（数据库中取得）存在和验证码的例子，但介于博文字数的限制，就留到下一篇博文中了，请阅读下一篇博文   SSH整合AJAX验证用户名存在和验证码的完整实例二  ，不好意思。

         本博文提供下载：

         博文的word原稿，AJAX使用的代码，AJAX + SSH 进行用户名（数据库中取得）存在和验证码的代码。如果有什么问题和好的建议请与木子（QQ：506817493）。

 

木子写于2009年8月7日

 

 

附源码下载：

博文的word原稿

AJAX使用的代码

AJAX + SSH 进行用户名（数据库中取得）存在和验证码的代码

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SSH整合AJAX验证用户名存在和验证码的完整实例二（含代码）

——AJAX学习笔记

 

在上一篇博文（SSH整合AJAX验证用户名存在和验证码的完整实例一）中介绍了AJAX的一些技术问题，现在就来我们的实例：SSH整合AJAX验证用户名存在和验证码的完整实例了。

先介绍这个实例中我遇到的问题

1.       用户名是从数据库中取得的，但是进行验证用户名是否存在的是个Servlet，这个时候就会想到在这个Servlet里建立一个Dao的对象对数据库的操作，而SSH整合的时候Spring对Servlet注入对象的机制是不一样的。具体的情查看我写的博文：

特殊情况（ActionForm，Servlet， Filter， Listener）下Spring如何注入对象

现在介绍一下再Servlet里如何通过Spring注入对象

使用Servlet进行验证，这种思路很适合AJAX验证的思路，不过问题出现了，还是空指针异常，Spring注入的对象根本没有实例化。一开始还以为和Servlet的生命周期有点关系，后来在网上搜了一些东西，还是感觉可以通过Spring进行注入的。

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

ServletContext   servletContext   =   request.getSession().getServletContext();          

ApplicationContext   ctx   =   WebApplicationContextUtils.getWebApplicationContext(servletContext   );

UsersManager   um   =   (UsersManager)ctx.getBean( "UserManager");

 

2.       验证码如何生成

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

网上的这个问题的解答大致是这样的，一个就是说这个是加载机制的问题，jsp是在Servlet前面进行的加载，所以说虽然生成图片的Servlet写人了session，不过jsp总是慢一拍了。

另一个就是建议我们使用AJAX进行了。这个也是我实现的，不过网上并没有太多的代码供我们参考，我也就在用户名验证的基础上加了一个验证码的验证了。测试通过是可以。

3.       在Servlet中验证的时候，会出现对多个字段的验证，象在我的这个例子中就有两个：用户名存在验证和验证码验证，那么如何处理验证后的返回的信息了。

解决办法那也只有用AJAX的xml数据格式了，可以通过解析获取不同的验证信息，这样就可以验证多个字段了。不过这时应该有个技巧怎么样进行性能的优化了，不然每次一个字段的验证都变成了所有字段的验证。 我处理的时候就是在AJAX进行传值的时候只传需要验证字段的值（在传值之前当然要用js进行一个非空验证了），这传到Servlet里，在通过判断哪个字段非空了，那这个时候就是验证这个字段了，其他空字段就用ifelse进行处理掉了。应该还是可以节约一些性能的吧。如果有什么好的想法我们可以一起讨论了。谢谢。

实例运行截图如下：

 

 

 

 

代码也就不贴了，后面会提供原代码下载的。下载发现一个问题就是下载的代码如何用了。说一下我的环境吧一般我写的Java EE 的代码是在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 进行用户名（数据库中取得）存在和验证码的代码

 

博客中的一些下载已经放到了百度云了，请根据需要下载。【点我去百度云下载】

最后弱弱地说一下，如果可以的话，转载请提供出处( )，谢谢。