• 利用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. }  



    具体细节见代码
  • 相关阅读:
    性能测试
    怎样开始用selenium进行自动化测试
    手机自动化测试的原理
    黑盒测试与白盒测试的区别
    白盒测试方法
    黑盒测试概念及设计方法
    接口测试的概念及常用方法
    运用c语言和Java写九九乘法表
    appium键值对的应用
    压力测试和负载测试的区别
  • 原文地址：https://www.cnblogs.com/jpfss/p/8446358.html
Copyright © 2020-2023  润新知