简单验证码实现(Ajax)

前端页面：

<!--验证码输入框 -->
<input type="text" class="entry" value="" placeholder="请输入短信验证码" id="u_code" autocomplete="off">
<!--获取验证码的按钮 -->
<input type="button" id="smsBtn" class="obtain" value="获取验证码" onclick="getRandNum(this);">
<!-- 服务器返回的验证码隐藏域 -->
<input type="hidden" name="randNum" id="randNum" value="" />

<a class="land" onclick="safeLogin()">确认登陆</a>

JS发送AJAX请求发送验证码：

获取到服务器响应后更新页面的隐藏域，在用户提交表单的时候可以此判断验证码是否输入正确。

<script>
var wait=0;

function getRandNum(){ 
    var photo = "${safePhone }";
    var auId = "${auId }" ;
    //alert(photo);
    var xmlHttp = null;
    //表示当前浏览器不是ie,如ns,firefox
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange=function()
    {
    if (xmlHttp.readyState==4 && xmlHttp.status==200)
      {
          alert("验证码发送成功,请注意查收");
          document.getElementById("randNum").value=xmlHttp.responseText;
          wait=60;
          var smsBtn = document.getElementById("smsBtn");
          time(smsBtn);
      }
    }
    xmlHttp.open("GET","${basePath }login/sendSmsCode.action?phone="+photo+"&auId="+auId,true);
    xmlHttp.send();
    
}

//计时
function time(o) {    
    if (wait == 0) {             
        o.removeAttribute("disabled");    
        //o.setAttribute("disabled", false);
        o.value="获取验证码";
         wait = 60;
         document.getElementById("randNum").value="";
    } else {
        o.setAttribute("disabled", true);
        o.value="已发(" + wait + "s)";
        wait--;
        setTimeout(function() {time(o)},1000);
    }    
}

function safeLogin(){
    var u_code = document.getElementById("u_code").value;
    var s_code = document.getElementById("randNum").value;
    //alert(u_code);
    if(u_code==""){
        alert("验证码不能为空！");
        return false ;
    }
    if(u_code!=s_code){
        alert("验证码输入不正确，请输入正确验证码！");
        return false ;
    }
    
    var safeLoginFrm = document.getElementById("safeLoginFrm"); 
    safeLoginFrm.submit();
}

</script>

服务器端ACTION：

    /*
     * 发送短信验证码
     */
    public void sendSmsCode() {
        HttpServletResponse response = ServletActionContext.getResponse();

        // 产生6位随机数字
        Random r = new Random();
        String randNum = "";
        for (int i = 0; i < 6; i++) {
            randNum += r.nextInt(10);
        }
        String content = "【验证码】" + randNum + "(后台安全登陆验证码,一分钟内有效)";
        // 发送短信begin：
        Map<String, String> sendMap = SendSmsMessage
                .sendMessage(content, phone);
        Integer sms_code = Integer.parseInt(sendMap.get("Code"));
        String sms_result = sendMap.get("Result");
        // 发送短信end

        try {
            PrintWriter writer = response.getWriter();
            writer.print(randNum);
            writer.flush();
            writer.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

上面简单实现了验证码功能，也算是一个AJAX的一个实例。