利用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. Qt源码下载

    这是官方下载地址:http://qt.nokia.com/downloads 点击右下角的 ftp.qt.nokia.com - Archive You can find our archive of ...

  2. Redis List类型学习

  3. NCDC 天气数据的预处理

    "Hadoop: The Definitive Guild" 这本书的例子都是使用NCDC 天气数据的,但由于书的出版和现在已经有一段时间了,NCDC现在提供的原始数据结构已经有了 ...

  4. 去掉IE提示：internet explorer 已限制此网页运行脚本或Activex控件

    运行加载OCX控件的HTML文件,显示提示如下图: 解决方法是在HTML文件中添加一行注释代码,如下图: 就是红色框内的代码.即:<!-- saved from url=(0014)about: ...

  5. MYSQL错误代码和消息

    服务器错误信息来自下述源文件: ·         错误消息信息列在share/errmsg.txt文件中.“%d”和“%s”分别代表编号和字符串,显示时,它们将被消息值取代. ·         错 ...

  6. router-link动态赋值

    A:router路由配置 export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home, c ...

  7. Ionic 分享功能(微博 微信 QQ)

    1.安装插件 cordova plugin add cordova-plugin-wechat --variable wechatappid=你申请微信appid cordova plugin add ...

  8. 获取地址栏URL中参数, getQuerySting()方法

    今天同事用的以前的获取url地址参数获取不到.以前的方法失效了.后面发现是正则表达式bug: 第一种获取方法(针对普通情况的一般够用): function getQueryString(name) { ...

  9. React State&生命周期

    State&生命周期 State&生命周期 到目前为止我们只学习了一种方法来更新UI. 我们调用ReactDOM.render()来改变输出: function tick(){ con ...

  10. linux服务器项目搭建常用命令

    linux下载链接文件 wget -c 后面是该网络地址和文件的位置. 例如:wget -c http://apache.opncas.or/MySQL/MySQL-7/v7.0.67/bin/MyS ...