利用Ajax实现输入完验证码之后直接判断验证码是否正确

最新推荐文章于 2022-11-21 15:46:04 发布

临风想望

最新推荐文章于 2022-11-21 15:46:04 发布

阅读量6.4k

点赞数 2

文章标签： ajax servlet 验证码

本文链接：https://blog.csdn.net/u011266252/article/details/52135895

版权

生成验证码的Servlet：

package com.muke;
//生成验证码；
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

public CheckCodeServlet() {
super();
}

protected void doGet(HttpServletRequest request,
HttpServletResponse response) {
doPost(request, response);
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) {
try {
createCheckCodeImage(68, 22, new Color(150, 180, 195), request,response);
} catch (IOException e) {
e.printStackTrace();
System.out.println("验证码生成失败");
}
}
// 创建验证码图片
private void createCheckCodeImage(int width, int height, Color bgColor,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
BufferedImage bi = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.setColor(bgColor);
g.fillRect(0, 0, width, height);
String codeStr = createCheckCode(request,g);
addRandomLine(g, width, height, 5);
ImageIO.write(bi, "JPG", response.getOutputStream());
//request.getSession().setAttribute("piccode", codeStr);
createCheckCodeSession(request, codeStr);
}
// 添加干扰线
private void addRandomLine(Graphics g, int width, int height, int numbers) {
Random r = new Random();//生成随机数，此处生成随机线条；
for (int i = 0; i < numbers; i++) {
int x1 = r.nextInt(width);
int x2 = r.nextInt(width);
int y1 = r.nextInt(height);
int y2 = r.nextInt(height);
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.drawLine(x1, y1, x2, y2);
}
}
// 随机创建验证码
private String createCheckCode(HttpServletRequest request,Graphics g) {
char[] code = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123466789".toCharArray();
Random r = new Random();
int len = code.length;
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) {
int index = r.nextInt(len);
// 记得在向图片添加验证码前设置验证码的颜色，否则可能会出现有一个验证码看不见的情况
g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
g.drawString(code[index] + "", (i * 15) + 3, 18);
sb.append(code[index]);
}
System.out.println(sb);
return sb.toString();
}
// 把验证码中的数据存储在session，以便来验证登录
private void createCheckCodeSession(HttpServletRequest request, String str) {
request.getSession().setAttribute("piccode", str);
String piccode = (String) request.getSession().getAttribute("piccode");
System.out.println(piccode);
}
}

JSP页面：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<title>无刷新验证码验证</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/checkcode/js/yanzhengma.js"
charset="utf-8"></script>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>

<script>
function myFunction(id) {
var l=document.getElementById(id).value.length
if(l==4){
var x = document.getElementById(id).value;
checkYanzhengma();
}
}
</script>
<script type="text/javascript">
function reloadCode(){
var time = new Date().getTime();
document.getElementById("imagecode").src="<%=request.getContextPath()%>/CheckCodeServlet?d="+time;
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
<h2>无刷新验证码实现</h2>

验证码：<input type="text" id="checkcode" οnkeyup="myFunction(this.id)" maxlength="4"/>
<img alt="验证码" id="imagecode" src="<%=request.getContextPath() %>/CheckCodeServlet"/>
<a href="javascript: reloadCode();">看不清楚</a><br>
<span id="tip" style="display: none; color: red"></span>
</body>

</html>

JavaScript代码：

//通过Ajax实现无刷新验证验证码；
var $ = function(id) {
return document.getElementById(id);
}
// 得到 XMLHttpRequest 对象
var getXMLHttpRequest = function() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e2) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e3) {
window.alert("Sorry,your browser does not support Ajax!");
}
}
}
return xmlHttp;
}
var xmlHttp = "";
// 检测 username
var checkYanzhengma = function() {
// 得到 XMLHttpRequest
xmlHttp = getXMLHttpRequest();
if (xmlHttp) {
// open document.URL +
xmlHttp.open("post", "CheckYanzhengma", true);//url对应CheckYanzhengma.java文件，true 异步,false 同步
// window.alert(document.URL + "CheckYanzhengma");
// 设置 Content-type
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送一个HTTP协议的头文件
// 设置回调函数
xmlHttp.onreadystatechange = statechange;
// send
var sendData = "checkcode=" + $("checkcode").value;
xmlHttp.send(sendData);
}
}
// ajax回调函数
var statechange = function() {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xmlHttp.readyState == "4") {
// 200: "OK"
// 404: 未找到页面
if (xmlHttp.status == "200") { //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
var isOK = xmlHttp.responseText;
if ("t" == isOK) {
$("tip").innerHTML = "验证码正确!";
} else if ("f" == isOK) {
$("tip").innerHTML = "验证码错误，请重新输入!";
//$("checkcode").value = "";
}
$("tip").style.display="inline-block";//将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
}
}
}

验证验证码的Servlet：

package com.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/CheckYanzhengma")
public class CheckYanzhengma extends HttpServlet {
private static final long serialVersionUID = 1L;

public CheckYanzhengma() {
super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String piccode = (String) request.getSession().getAttribute("piccode");
String checkcode = request.getParameter("checkcode");
checkcode = checkcode.toUpperCase();//toUpperCase() 方法用于把字符串转换为大写,即用户输入的小写字母转换为大写字母后再做判断;
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(checkcode.equals(piccode)){
out.print("t");
}else{
out.print("f");
//piccode=null;
}
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}

}