实验五 AJAX开发及JSP验证码
一、实验目的
1．了解AJAX技术的原理及开发。
2．掌握验证码的开发、刷新和验证方法。
二、实验学时
2H
三、实验性质
综合性实验
四、实验内容
A.在实验四基础上使用AJAX技术实现异步登录功能。（40分）
B．在登录表单中，显示数字验证码，如果用户看不清，可以点击验证码或者旁边的“看不清”链接来重新获取验证码，并要求有验证功能。（30分）
C．将验证码变为数字和字母的混合。（20分）
五、源代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX实现验证码交互</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
body{
width: 100%;
height:98%
}
div{
position:relative;
left:50% ;top:10%;
margin-left:-200px;
width:400px;
}
.codeInput{
height:25px;
}
.codeImage{
height:25px;
position: relative;
top: 5px;
left:2px;
}
#resultTipID{
display:none;
position: relative;
top: 3px;
left:5px;
width:15px;
height:15px;
}
</style>
<script type="text/javascript">
function createAjax(){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function trim(str){
//首先判断类型，是String类型才可以操作否则直接返回
var type= typeof(str);
if(type=='string'){
str=str.replace(/^\s+/,"");//替换字符串开头的所有" "-->""
str=str.replace(/\s+$/,"");//替换字符串结尾的所有" "-->""
}
return str;
}
</script>
</head>
<body>
<div id="codeForm" align="center">
验证码：<input type="text" id="codeID" maxlength="4" size="4px" class="codeInput">
<img id="codeImageID" alt="刷新" src="generateCode.jsp" class="codeImage" >
<img id="resultTipID" src="#" />
</div>
</body>
<script type="text/javascript">
document.getElementById("codeImageID").οnclick=function(){
//当单击验证码图片,只需要改变一个img标签的src，完成验证码的刷新
var url="${pageContext.request.contextPath}/generateCode.jsp?time="+new Date().getTime();
var imageElement=document.getElementById("codeImageID");
this.src=url;
}
document.getElementById("codeID").οnkeyup=function(){
var value=this.value;
value=trim(value.toUpperCase());
this.value=value;
var tipElement=document.getElementById("resultTipID");
if(value.length==4){
//创建ajax对象
var ajax=createAjax();
//设置method和url
var method="POST";
var url="${pageContext.request.contextPath}//verificateCodeServlet";
//准备ajax
ajax.open(method,url);
//设置post传递请求头，固定写法
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送
var content="verificationCode="+value;
ajax.send(content);
//------------等待服务器端响应处理-----------------
ajax.onreadystatechange=function(){
if (ajax.readyState==4 && ajax.status==200){
var url= ajax.responseText;
//设置tip属性
tipElement.src=url;
//修改css，显示tip
tipElement.style.display='inline';
}
}
}else{
tipElement.style.display='none';
}
}
</script>
</html>
六、实验总结
请书写你对本次实验有哪些实质性的收获和体会，以及对本次实验有何良好的建议？（10分）
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
