利用ajax异步校验验证码

示例结果如图所示

具体步骤如下：

step1:

jsp页面及js脚本

  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>
<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>

<html>

	<head>

		<title>form</title>

		<script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>

		<script type="text/javascript">

			//检查用户名是否存在

			function check_username(){

				//step1,获得ajax对象

				var xhr = getXhr();

				var username = $V('userrname');

				//step2,使用ajax对象发请求(get/post)

				xhr.open('get','checkUsername?username='+username,true);

				//step3,编写服务器端的处理程序

				//step4,编写事件处理函数

				xhr.onreadystatechange = function(){

					if(xhr.readyState==4){

						if(xhr.status==200){

							//服务器访问正常

							var txt = xhr.responseText;

							$('check_msg').innerHTML = txt;

						}else{

							$('check_msg').innerHTML = '验证出错';

						}

					}

				};

				$('check_msg').innerHTML = '正在验证';

				xhr.send(null);

			}

			//检查验证码是否正确

			function check_number(){

				var xhr = getXhr();

				var code = $V('code');

				xhr.open('get','checkNumber?code='+code,true);

				xhr.onreadystatechange = function(){

					if(xhr.readyState==4){

						if(xhr.status==200){

							//服务器访问正常

							var txt = xhr.responseText;

							$('code_msg').innerHTML = txt;

						}else{

							$('code_msg').innerHTML = '验证出错';

						}

					}

				};

				$('code_msg').innerHTML = '正在验证';

				xhr.send(null);

			}

		</script>

	</head>

	<body>

		<form action="" method="post">

			<fieldset>

				<legend>登陆</legend>

				<!--  <a href="javascript:;" onclick="alert(getXhr())">测试获取ajax对象</a> -->

				用户名：<input id="userrname" name="username" onblur="check_username();">

				<span id="check_msg" style="color:red;"></span><br/>

				密码：<input name="pwd" type="password"><br/>

				验证码：<img id="image" src="checkcode" onclick="this.src='checkcode?'+(new Date()).getTime()">

				<a href="javascript:;" onclick="$('image').src='checkcode?'+(new Date()).getTime()">换一张</a>

				<input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>

				<input type="submit" value="提交"><br/>

			</fieldset>

		</form>

	</body>

</html>

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

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

function $(id){

	return document.getElementById(id);

}

//根据id获取节点的值


function $V(id){


return $(id).value;


}

//获取ajax对象


function getXhr(){


var xhr = null;


if(window.XMLHttpRequest){


xhr = new XMLHttpRequest();


}else{


xhr = new ActiveXObject('Microsoft.XMLHttp')


}


return xhr;


}

具体细节见代码

利用ajax异步校验验证码（转）的更多相关文章

  1. struts2中的Ajax异步校验

    登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...

  2. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  3. 问答项目---登陆账号密码登陆做AJAX异步校验

    异步验证管理员帐号方法: /* 异步验证管理员帐号 */ public function checkAccount(){ if(!IS_AJAX){echo "页面不存在";die ...

  4. Struts2学习（四）利用ajax异步上传

    上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步 ...

  5. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  6. 利用ajax异步处理POST表单中的数据

    //防止页面进行跳转 $(document).ready(function(){   $("#submit").click(function(){    var str_data= ...

  7. Ajax实现验证码异步校验

    验证码异步校验可以防止表单提交后因验证码不正确导致已填的其它项都清空. 整个过程图如下 验证码输入框出代码 <div class="form-group"> <l ...

  8. 利用onekeyup即可实现验证码的点击刷新功能

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...

  9. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

随机推荐

  1. java最常用的几种加密算法

    1. BASE64 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64编码可用于在HTTP环境下传递 ...

  2. Spring Security Web应用入门环境搭建

    在使用Spring Security配置Web应用之前,首先要准备一个基于Maven的Spring框架创建的Web应用(Spring MVC不是必须的),本文的内容都是基于这个前提下的. pom.xm ...

  3. GitHub的使用问题记录

    1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...

  4. day48作业

    使用Bootstrap框架编写一个简单的web静态页面 效果图: <!DOCTYPE html> <html lang="en"> <head> ...

  5. phpqrcode.php 生成二维码图片用于推广

    <?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...

  6. typeof, offsetof, container_of宏

    container_of宏实现如下: #define container_of(ptr, type, member) ({ \ )->member ) *__mptr = (ptr); \ (t ...

  7. substring() 方法用于提取字符串中介于两个指定下标之间的字符。

    substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数 描述 start 必需.一个非负的整数,规定 ...

  8. 2018-2-13-win10-uwp-设置启动窗口大小--获取窗口大小

    title author date CreateTime categories win10 uwp 设置启动窗口大小 获取窗口大小 lindexi 2018-2-13 17:23:3 +0800 20 ...

  9. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  10. 关于JavaScript的一些不得不知道的事儿

    1.JavaScript不区分整数和浮点数,统一用Number表示. 2.NaN这个特殊的Number与所有其他值都不相等,包括它自己: NaN===NaN; //false 唯一能判断NaN的方法是 ...