Ajax+Struts2实现验证码验证功能

---------------------------------------------------------------------------------------------------------------
[版权申明：本文系作者原创，转载请注明出处]
文章出处：http://blog.csdn.net/sdksdk0/article/details/51755489
作者：朱培 ID：sdksdk0
---------------------------------------------------------------------------------------------------------------

今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。

这里命名为01_image.jsp，这类的主要功能就是生成验证码，里面是各种画线条，随机数字等，我这里设置的是5个数字的验证，如果你想要改成其他的也可以，大致思路就是在生成数字的那个循环那里加上字母就可以了。

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>

<%!

public Color getColor(){

    Random random = new Random();

    int r = random.nextInt(256);//0-255

    int g = random.nextInt(256);

    int b = random.nextInt(256);

    return new Color(r,g,b);

}

public String getNum(){

    String str = "";

    Random random = new Random();

    for(int i=0;i<5;i++){

        str += random.nextInt(10);//0-9

    }

    return str;

}

%>

<%

response.setHeader("pragma", "no-cache");

response.setHeader("cache-control", "no-cache");

response.setDateHeader("expires", 0);

BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);

Graphics g = image.getGraphics();

g.setColor(new Color(200,200,200));

g.fillRect(0,0,80,30);

for (int i = 0; i < 50; i++) {

    Random random = new Random();

    int x = random.nextInt(80);

    int y = random.nextInt(30);

    int xl = random.nextInt(x+10);

    int yl = random.nextInt(y+10);

    g.setColor(getColor());

    g.drawLine(x, y, x + xl, y + yl);

}

g.setFont(new Font("serif", Font.BOLD,16));

g.setColor(Color.BLACK);

String checkNum = getNum();//"2525"

StringBuffer sb = new StringBuffer();

for(int i=0;i<checkNum.length();i++){

    sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"

}

g.drawString(sb.toString(),15,20);

session.setAttribute("CHECKNUM",checkNum);//2525

//通过字节输出流输出

ImageIO.write(image,"jpeg",response.getOutputStream());

out.clear();

out = pageContext.pushBody();

%>

接下来把输入验证码的html页面写好，我这里是些在了一个jsp文件中的。命名为checkcode.jsp

                <th>验证码:</th>

                <td><input type="text"  name="checkcode" id="checkcodeID"  maxlength="5" /></td>

                <td><img   src="01_image.jsp" id="imgID"  /></td>

                <td id="resID"></td>

            </tr>

        </table>

    </form>

然后给这个文件添加javascript代码，这里使用的当然就是一个ajax啦，对于ajax的编码步骤之前已经写的很详细了，所以我们这里就直接使用了。对于ajax.js写好后放到js目录下面，然后再找个checkcode.jsp中引入中国js文件 ajax.js的内容：

//创建AJAX异步对象，即XMLHttpRequest

function createAJAX(){

var ajax = null;

try{

    ajax = new ActiveXObject("microsoft.xmlhttp");

}catch(e1){

    try{

        ajax = new XMLHttpRequest();

    }catch(e2){

        alert("你的浏览器不支持ajax，请更换浏览器");

    }

}

return ajax;

}

然后就是chenkcode中的js内容了

//去掉两边的空格

        function trim(str){

            str=str.replace(/^\s*/,"");//从左侧开始，把空格去掉

            str=str.replace(/\s*$/,""); //从右侧开始，把K歌都去掉

            return str;

        }

        document.getElementById("checkcodeID").onkeyup=function(){

            var checkcode=this.value;

            checkcode=trim(checkcode);

            if(checkcode.length==5){

                var ajax=createAJAX();

                var method="POST";

                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();

                ajax.open(method,url);

                //设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码

                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

                var content="checkcode="+checkcode;

                ajax.send(content);

                ajax.onreadystatechange=function(){

                    if(ajax.readyState==4){

                        if(ajax.status==200){

                            var tip=ajax.responseText;

                            var img=document.createElement("img");

                            img.src=tip;

                            img.style.width="14px";

                            img.style.height="14px";

                            var td=document.getElementById("resID");

                            td.innerHTML="";

                            td.appendChild(img);

                        }

                    }

                }

            }else{

                var td=document.getElementById("resID");

                td.innerHTML="";

            }

        }

然后开始写服务器端的代码，进行校验的话就需要这样的一个类了：

package cn.tf.checkcode;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;

import com.opensymphony.xwork2.ActionSupport;

//验证码检查

public class CheckcodeAction extends ActionSupport{

private  String checkcode;

public void setCheckcode(String checkcode) {

    this.checkcode = checkcode;

}

/**

 * 验证

 * @throws IOException

 */

public String check() throws IOException {

    //图片路径

    String tip="images/a.jpg";

    //从服务器获取session中的验证码

    String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM");

    if(checkcode.equals(checkcodeServer)){

        tip="images/b.jpg";

    }

    //以IO流的方式将tip变量输出到ajax异步对象中

    HttpServletResponse  response=ServletActionContext.getResponse();

    response.setContentType("text/html;charset=UTF-8");

    PrintWriter pw=response.getWriter();

    pw.write(tip);

    pw.flush();

    pw.close();

    return null;

}

}

最后在struts.xml文件中写入相应的方法。

  <struts>

 <package name="myPackage" extends="struts-default" namespace="/">

        <action

            name="checkRequest"

            class="cn.tf.checkcode.CheckcodeAction"

            method="check">

        </action>

</package>

</struts>

运行结果如下：验证成功则返回绿色的小勾，错误则红色的叉。

源码下载地址：http://download.csdn.net/detail/sdksdk0/9558933

巴特西

Ajax+Struts2实现验证码验证功能

最新文章

热门文章