简单验证码实现(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的一个实例。