利用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. charles-截取移动端请求-设置代理

    Charles 上的设置 1.    要截取 iPhone 上的网络请求,我们首先需要将 Charles 的代理功能打开.在 Charles 的菜单栏上选择 “Proxy”–>“Proxy Se ...

  2. ListCtrl使用指南

    http://blog.csdn.net/bqw2008/article/details/2047489 Windows ListCtrl使用技巧1. ListCtrl 风格       LVS_IC ...

  3. C++面向对象高级编程(上)-Geekband

    头文件和类声明 一定要注意使用防卫式的头文件声明: #ifndef _CLASSHEAD_ #define _CLASSHEAD_ . . . . #endif 基于对象和面向对象 : 基于对象 单一 ...

  4. CSS元素隐藏方法总结

    display:none; visibility:hidden; opacity:0三者的区别 display:none; 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM ...

  5. Hbase实验：java创建和删除table

    开启zookeeper.hadoop.hbase: 打开eclipse创一个java project,然后导入所需jar包: 写好java代码,运行create,然后去hbase shell里查看: ...

  6. LL(1),LR(0),SLR(1),LALR(1),LR(1)对比与分析

    前言:考虑到这几种文法如果把具体内容讲下来肯定篇幅太长,而且繁多的符号对初学者肯定是极不友好的,而且我相信看这篇博客的人已经对这几个文法已经有所了解了,本篇博客的内容只是对 这几个文法做一下对比,加深 ...

  7. PAT甲级——A1060 Are They Equal

    If a machine can save only 3 significant digits, the float numbers 12300 and 12358.9 are considered ...

  8. Spring.之.报错：Caused by: java.lang.IllegalArgumentException: No Spring Session store is configured: set the 'spring.session.store-type' property

    Spring.之.报错 No Spring Session store is configured springboot在启动的时候报如下错误: Error starting ApplicationC ...

  9. 《数据结构与算法分析——C语言描述》ADT实现(NO.03) : 二叉搜索树/二叉查找树（Binary Search Tree)

    二叉搜索树(Binary Search Tree),又名二叉查找树.二叉排序树,是一种简单的二叉树.它的特点是每一个结点的左(右)子树各结点的元素一定小于(大于)该结点的元素.将该树用于查找时,由于二 ...

  10. vim编辑器操作①

    Linux文本编辑器: 行编辑器:sed 全屏编辑器:nano,vi/vim 本文主要介绍说明vim编辑器的相关使用: 其有三种模式,即: 编辑模式(默认模式).插入模式(输入模式).末行模式(内置的 ...