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

时间：2021-09-05 05:50:51

利用ajax异步校验验证码

利用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;


}

具体细节见代码

相关文章