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

<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