利用ajax异步校验验证码（转）

利用ajax异步校验验证码


示例结果如图所示


具体步骤如下：

step1:

jsp页面及js脚本


[html] view plain copy
 print?
  1. <%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>  
  2. <html>  
  3.     <head>  
  4.         <title>form</title>  
  5.         <script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>  
  6.         <script type="text/javascript">  
  7.             //检查用户名是否存在  
  8.             function check_username(){  
  9.                 //step1,获得ajax对象  
  10.                 var xhr = getXhr();  
  11.                 var username = $V('userrname');  
  12.                 //step2,使用ajax对象发请求(get/post)  
  13.                 xhr.open('get','checkUsername?username='+username,true);  
  14.                 //step3,编写服务器端的处理程序  
  15.                 //step4,编写事件处理函数  
  16.                 xhr.onreadystatechange = function(){  
  17.                     if(xhr.readyState==4){  
  18.                         if(xhr.status==200){  
  19.                             //服务器访问正常  
  20.                             var txt = xhr.responseText;  
  21.                             $('check_msg').innerHTML = txt;  
  22.                         }else{  
  23.                             $('check_msg').innerHTML = '验证出错';  
  24.                         }  
  25.                     }  
  26.                 };  
  27.                 $('check_msg').innerHTML = '正在验证';  
  28.                 xhr.send(null);  
  29.             }  
  30.             //检查验证码是否正确  
  31.             function check_number(){  
  32.                 var xhr = getXhr();  
  33.                 var code = $V('code');  
  34.                 xhr.open('get','checkNumber?code='+code,true);  
  35.                 xhr.onreadystatechange = function(){  
  36.                     if(xhr.readyState==4){  
  37.                         if(xhr.status==200){  
  38.                             //服务器访问正常  
  39.                             var txt = xhr.responseText;  
  40.                             $('code_msg').innerHTML = txt;  
  41.                         }else{  
  42.                             $('code_msg').innerHTML = '验证出错';  
  43.                         }  
  44.                     }  
  45.                 };  
  46.                 $('code_msg').innerHTML = '正在验证';  
  47.                 xhr.send(null);  
  48.             }  
  49.         </script>  
  50.     </head>  
  51.     <body>  
  52.         <form action="" method="post">  
  53.             <fieldset>  
  54.                 <legend>登陆</legend>  
  55.                 <!--  <a href="javascript:;" onclick="alert(getXhr())">测试获取ajax对象</a> -->  
  56.                 用户名：<input id="userrname" name="username" onblur="check_username();">  
  57.                 <span id="check_msg" style="color:red;"></span><br/>  
  58.                 密码：<input name="pwd" type="password"><br/>  
  59.                 验证码：<img id="image" src="checkcode" onclick="this.src='checkcode?'+(new Date()).getTime()">  
  60.                 <a href="javascript:;" onclick="$('image').src='checkcode?'+(new Date()).getTime()">换一张</a>  
  61.                 <input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>  
  62.                 <input type="submit" value="提交"><br/>  
  63.             </fieldset>  
  64.         </form>  
  65.     </body>  
  66. </html>  


my.js代码：封装的几个常用函数

[javascript] view plain copy
 print?
  1. //根据id获取节点  
  2. function $(id){  
  3.     return document.getElementById(id);  
  4. }  
  5.   
  6. //根据id获取节点的值  
  7. function $V(id){  
  8.     return $(id).value;  
  9. }  
  10.   
  11. //获取ajax对象  
  12. function getXhr(){  
  13.     var xhr = null;  
  14.     if(window.XMLHttpRequest){  
  15.         xhr = new XMLHttpRequest();  
  16.     }else{  
  17.         xhr = new ActiveXObject('Microsoft.XMLHttp')  
  18.     }  
  19.     return xhr;  
  20. }  



具体细节见代码



posted @ 2018-02-13 11:42  星朝  阅读(1064)  评论(0)  编辑  收藏  举报