未加星标

基于ajax实现验证码功能

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例为大家分享了ajax实现验证码功能的具体代码,供大家参考,具体内容如下

首先创建一个验证码:

<%@ page contentType="image/jpeg; charset=utf-8"
language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
pageEncoding="UTF-8"%>
<!-- 以上导入awt和awt.image包 -->
<%!
//获取随机颜色
public Color getColor(){
Random random = new Random();
//使用rgb()随机产生颜色
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);

return new Color(r,g,b);
}

//获取随机数字 产生一个4位数
public String getNum(){
String str = "";
Random random = new Random();
for(int i = 0;i < 4;i++){
str += random.nextInt(10); //0-9
}
return str;
}
%>

<%
/* 清除缓存 */
response.setHeader("pragma", "mo-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);
//产生矩形框
BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
//获取画笔工具
Graphics g = image.getGraphics();
//设置矩形框的颜色
g.setColor(new Color(200,200,200));
//设置坐标和宽高
g.fillRect(0, 0, 80, 30);

//随机产生干扰线
for(int i = 0;i < 30;i++){
Random random = new Random();
int x = random.nextInt(80);
int y = random.nextInt(30);
int x1 = random.nextInt(x + 10);
int y1 = random.nextInt(y + 10);
//设置随机颜色
g.setColor(getColor());
//画出来
g.drawLine(x, y, x1, y1);
}

//字的颜色和数字
g.setFont(new Font("Microsoft YaHei",Font.BOLD,16));
g.setColor(Color.BLACK);
//获取随机数字
String checkNum = getNum();

//给字拼接空格
StringBuffer sb = new StringBuffer();
for(int i = 0;i < checkNum.length();i++){
sb.append(checkNum.charAt(i) + " ");
}
//画出数字
g.drawString(sb.toString(), 15, 20);
//存入session域中
session.setAttribute("CHECKNUM", checkNum); //例如1010
//将图像以jpeg的形式通过字节流输出
ImageIO.write(image, "jpeg", response.getOutputStream());
//清除缓存
out.clear();
//放入body中
out = pageContext.pushBody();
%>
将验证码压缩成图片,在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >

<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">
<style type="text/css">
table{
margin: 100px auto;
}

</style>
</head>

<body>
<table border="0" align="center">
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td>
<td><img alt="加载失败" src="image.jsp"></td>
<td id="show">√√√</td>
</tr>
</table>
</body>
<script type="text/javascript">
//去除空格
function trim(str){
//从左侧开始替换空格
str = str.replace(/^\s*/,"");
//从左侧开始替换空格
str = str.replace(/\s$/,"");
return str;
}

</script>

<script type="text/javascript">
//创建ajax对象
function createAjax(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
ajax = new XMLHttpRequest();
}catch(e1){
alert("请更换浏览器");
}
}
return ajax;
}
</script>


<script type="text/javascript">
document.getElementById("checkcodeID").onkeyup = function(){
var checkcode = this.value;
//去除空格
checkcode = trim(checkcode);
if(checkcode.length == 4){
//获取ajax对象
var ajax = createAjax();
//获取去空格的内容

var method = "POST";
var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime();
//准备发送异步请求
ajax.open(method, url);
//设置请求头POST提交方式才需要
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//拼接实体内容
var content = "checkcode=" + checkcode;
//发送请求
ajax.send(content);

//监听服务器状态变化
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//获取服务器内容
var tip = ajax.responseText;
//获取图片路径 然后进行放入td中
var img = document.createElement("img");
img.src = tip;
img.style.width = "14px";
img.style.height = "14px";
var td = document.getElementById("show");
td.innerHTML = "";
td.appendChild(img);
}
}
}

}

}
</script>
</html>
然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出

public class CheckcodeServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//图片路径
String tip = "images/MsgError.gif";

String checkcode = req.getParameter("checkcode");
//测试
System.out.println(checkcode);
//获取session域中的数字
String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM");
//判断
if (checkcode.equals(checkcodeService)) {
tip = "images/MsgSent.gif";
}
//输出路径
PrintWriter pw = resp.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}
当输入第4个数字的时候就会出现提示
运行结果:
基于ajax实现验证码功能
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML服务器AjaxXML浏览器UTHeadUB数据矩形
分页:12
转载请注明
本文标题:基于ajax实现验证码功能
本站链接:http://www.codesec.net/view/568431.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)