动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

在开发JavaWeb应用时，动态生成能够局部刷新的验证码是一项必须的功能，在这里我们将会详细的讲解如何实现这一功能。

一、涉及技术

该功能需要用到AJAX异步传输技术，这样能保证在点击“看不清，重新获取验证码”按钮时，能够不刷新页面其它内容而局部刷新验证码图片内容。

还需要用到Servlet技术，这里会在Servlet的GET方法中通过Java内置的画图工具绘制一个验证码图片，可以在HTML的<img/>标签中的src属性获取缓存图片资源。

二、各个页面及代码

1.index.html，是一个简单的表单，上面仅有简单几项内容，AJAX异步传输技术也在上面体现，代码中有详细注释。

[html] view plain copy

print?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>验证码测试</title>
</head>
<body>
<script style="javascript">
var xmlHttp;
//异步刷新验证码
function reload() {
//针对不同浏览器，不同的方式生成xmlHttp对象
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}catch(e){
alert("你的浏览器不支持AJAX") ;
return false;
}
}
}
var url="ValidateCodeServlet";
xmlHttp.onreadystatechange = deal;//该属性为一个函数
xmlHttp.open("GET", url, true);//初始化xmlHttp
xmlHttp.send(null);//发送
}
function deal(){
if(xmlHttp.readyState==4){//当状态值为4时，接收到服务器传输的信息
//重新从servlet获得图片资源，并且防止浏览器缓存，加了时间
document.getElementById("validate_code").src = "ValidateCodeServlet?" + new Date().getTime();
}
}
</script>
<form method="post" action="check.jsp">
<input type="text" name="input_code"/>
<img src="ValidateCodeServlet" id="validate_code"/>
<a href="#" onclick="reload()">看不清楚，换一个</a>
<input type="submit"/>
</form>
</body>
</html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <title>验证码测试</title></head><body><script style="javascript">    var xmlHttp;    //异步刷新验证码    function reload() {        //针对不同浏览器，不同的方式生成xmlHttp对象        try{            xmlHttp=new XMLHttpRequest();        }catch(e){            try{                xmlHttp=new ActiveXObject("Msxml2.XMLHttp");            }catch(e){                try{                    xmlHttp=new ActiveXObject("Microsoft.XMLHttp");                }catch(e){                    alert("你的浏览器不支持AJAX")   ;                    return false;                }            }        }        var url="ValidateCodeServlet";        xmlHttp.onreadystatechange = deal;//该属性为一个函数        xmlHttp.open("GET", url, true);//初始化xmlHttp        xmlHttp.send(null);//发送    }    function deal(){        if(xmlHttp.readyState==4){//当状态值为4时，接收到服务器传输的信息            //重新从servlet获得图片资源，并且防止浏览器缓存，加了时间            document.getElementById("validate_code").src = "ValidateCodeServlet?" + new Date().getTime();        }    }</script><form method="post" action="check.jsp">    <input type="text" name="input_code"/>    <img  src="ValidateCodeServlet" id="validate_code"/>    <a href="#" onclick="reload()">看不清楚，换一个</a>    <input type="submit"/></form></body></html>

2.check.jsp，用来判断用户表单提交的验证码是否正确，也是较为简单的Java代码。

[html] view plain copy

print?

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>检验验证码</title>
</head>
<body>
<%
String code = (String) session.getAttribute("code");
String input_code = request.getParameter("input_code");
if (code != null && input_code != null) {
input_code = input_code.toUpperCase();
if (code.equals(input_code)) {
out.print("验证码正确");
} else {
out.print("验证码错误");
}
}
%>
<a href="index.html">返回填写页面</a>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><html><head>    <title>检验验证码</title></head><body><%    String code = (String) session.getAttribute("code");    String input_code = request.getParameter("input_code");    if (code != null && input_code != null) {        input_code = input_code.toUpperCase();        if (code.equals(input_code)) {            out.print("验证码正确");        } else {            out.print("验证码错误");        }    }%><a href="index.html">返回填写页面</a></body></html>

3.ValidateCodeServlet，生成验证码图片的文件，代码中有详细的注释。

[java] view plain copy

print?

package com.yykj.servlet;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
public class ValidateCodeServlet extends HttpServlet {
private Random random = new Random();
private String[] allCodes = {
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"A", "B", "C", "D", "E", "F", "G", "H", "I",
"J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z"
};
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Pragma", "No-cache");
resp.setHeader("Cache-Control", "No-cache");
resp.setDateHeader("Expires", 0);//禁止客户端缓存页面
resp.setContentType("image/jpg");//设置响应正文类型为图片
int height = 20;
int width = 60;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();//获取处理图片的画笔
g.setColor(getRandomColor(200, 250));//设置背景色
g.fillRect(0, 0, width, height);//画一个矩形
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));//设置字体
g.setColor(getRandomColor(160, 200));//设置干扰线的颜色
for (int i = 0; i < 100; i++){//画一百条干扰线
int x = random.nextInt(width);
int y = random.nextInt(height);
int x1 = random.nextInt(10);
int y1 = random.nextInt(10);
g.drawLine(x, y, x1, y1);//干扰线的两个顶点坐标
}
String strCode = "";
for (int i = 0; i < 4; i++){//生成四个随机字符
String strNumber = allCodes[random.nextInt(36)];
strCode += strNumber;
g.setColor(getRandomColor(20, 120));
g.drawString(strNumber , 13 * i + 3, 16);
}
req.getSession(true).setAttribute("code", strCode);//将生成的验证码存入session
g.dispose();//释放图像的上下文资源
ImageIO.write(image, "JPEG", resp.getOutputStream());//输出JPEG格式图像
resp.getOutputStream().flush();//刷新输出流
resp.getOutputStream().close();//关闭输出流
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
//生成随机RGB颜色
private Color getRandomColor(int min, int max){
int r = min + random.nextInt(max - min);
int b = min + random.nextInt(max - min);
int g = min + random.nextInt(max - min);
return new Color(r, b, g);
}
}

package com.yykj.servlet;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.*;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;public class ValidateCodeServlet extends HttpServlet {    private Random random = new Random();    private String[] allCodes = {        "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",            "A", "B", "C", "D", "E", "F", "G", "H", "I",            "J", "K", "L", "M", "N", "O", "P", "Q", "R",            "S", "T", "U", "V", "W", "X", "Y", "Z"    };    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        resp.setHeader("Pragma", "No-cache");        resp.setHeader("Cache-Control", "No-cache");        resp.setDateHeader("Expires", 0);//禁止客户端缓存页面        resp.setContentType("image/jpg");//设置响应正文类型为图片        int height = 20;        int width = 60;        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);        Graphics g = image.getGraphics();//获取处理图片的画笔        g.setColor(getRandomColor(200, 250));//设置背景色        g.fillRect(0, 0, width, height);//画一个矩形        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));//设置字体        g.setColor(getRandomColor(160, 200));//设置干扰线的颜色        for (int i = 0; i < 100; i++){//画一百条干扰线            int x = random.nextInt(width);            int y = random.nextInt(height);            int x1 = random.nextInt(10);            int y1 = random.nextInt(10);            g.drawLine(x, y, x1, y1);//干扰线的两个顶点坐标        }        String strCode = "";        for (int i = 0; i < 4; i++){//生成四个随机字符            String strNumber = allCodes[random.nextInt(36)];            strCode += strNumber;            g.setColor(getRandomColor(20, 120));            g.drawString(strNumber , 13 * i + 3, 16);        }        req.getSession(true).setAttribute("code", strCode);//将生成的验证码存入session        g.dispose();//释放图像的上下文资源        ImageIO.write(image, "JPEG", resp.getOutputStream());//输出JPEG格式图像        resp.getOutputStream().flush();//刷新输出流        resp.getOutputStream().close();//关闭输出流    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doGet(req, resp);    }    //生成随机RGB颜色    private Color getRandomColor(int min, int max){        int r = min + random.nextInt(max - min);        int b = min + random.nextInt(max - min);        int g = min + random.nextInt(max - min);        return new Color(r, b, g);    }}

注意：ValidateCodeServlet要在web.xml中配置，配置代码如下：

[html] view plain copy

print?

<servlet>
<servlet-name>ValidateCodeServlet</servlet-name>
<servlet-class>com.yykj.servlet.ValidateCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidateCodeServlet</servlet-name>
<url-pattern>/ValidateCodeServlet</url-pattern>
</servlet-mapping>

  <servlet>    <servlet-name>ValidateCodeServlet</servlet-name>    <servlet-class>com.yykj.servlet.ValidateCodeServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>ValidateCodeServlet</servlet-name>    <url-pattern>/ValidateCodeServlet</url-pattern>  </servlet-mapping>

原文地址：https://www.cnblogs.com/jpfss/p/8444773.html

时间： 2024-10-29 04:12:33

动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱的相关文章

（局部刷新）jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

模拟Hibernate动态生成SQL语句

这里有一个xml配置文件,也就是Hibernate框架中会用到的POJO和数据库的映射文件 1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" 3 "http://www.hibernate.org/dtd/hibernate-

15 Ajax技术

添加新博客编辑本博客 yuan先生博客一.简介特点异步请求局部刷新二.Ajax的实现 jQuery实现Ajax url:请求的URL type:请求方式 data:请求发送的数据,type为get数据会拼接到url中 success:请求成功后执行的回调函数原文地址:https://www.cnblogs.com/yaya625202/p/9315911.html

实现带有验证码的ajax局部刷新登录界面

现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh

在JSP中动态生成随机验证码，登录时后台校验验证码，以及如何避免同一个验证码被重复提交爆破密码

只需几步就可以生成动态随机的验证码,最终效果如下图: 一前台显示页面login.jsp 其中验证码显示的是一张图片,链接指向的是生成验证码的servlet,同时点击图片后触发changeImg()这个js函数,使其动态生成一个新的验证码,这个函数中的参数t=Math.random()并不会参与验证码的生成,它的作用仅仅只是表示每次提交的并不是同一个请求,需要单独处理,完整的login.jsp代码如下: <%@ page language="java" contentType=&

JSP动态生成验证码

(1)在登录应用中,为防止恶意登录,常常需要服务器动态生成验证码并存储在session作用范围中,最后以图像形式返回给客户端显示 (2)下边的代码实现的功能:写一个JSP页,动态生成一个验证码,存储在session作用范围内,并以图像形式返回给客户端显示. 另写一个JSP页面,引用此JSP页面生成的验证码: authen.jsp代码如下: <%@ page import="java.awt.*,java.awt.image.*,java.util.*,com.sun.image.codec

Ajax原生的js（XMLHttpRequest对象）--实现局部刷新

AJAX 是一种用于创建快速动态网页的技术.(不用刷新整个页面和服务器通讯的方法 ) XMLHttpRequest对象:是对js的扩展,可以实现网页与服务器进行通信,通常把Ajax当做XMLHttpRequest对象的代名词. 客户端的语言一般是HTML,css,JavaScript:服务器端一般用PHP,jsp,ASP:中间传输的格式一般为HTML,xml,TXT,json:传输协议是http ajax需要某种格式化的格式在服务器和客户端之间传递信息,XML,JSON是常用的格式 DOM实现动

利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除

声明:此为本人原创,只想实现功能,界面样式方面没多考虑,很粗糙能看懂就行--2018-5-14 动态生成table,我利用jsp内嵌java代码从后台获取对象集合,输出的时候有2中方法 1.直接利用java代码for(b1 b:bs)输出 2.利用JSTL标签库的c:foreach输出不同之处在于,利用c:foreach输出要把获取的对象集合加入到request,然后用${}来读取,而for(b1 b:bs)可以直接输出. 第一种方法--for(b1 b:bs)输出<table id="

PHP 动态生成验证码

……机器人会在网站中搜寻允许他们插入广告的输入表单,在虚拟世界没有什么能阻挡它们胡作非为.这些机器人效率极高,完全不关心所攻击的表单的本来用途.它们唯一的目标就是用它们的垃圾广告覆盖你的内容,残忍地为它们的主人谋取广告收入. 要检验一个表单所面对的是一个真正的人,这种测试称为CAPTCHA(完全自动化公共图灵测试).目前最有效的方法是生成一个要求用户输入的随机通行短语,为了防止支持OCR(光学字符识别)的机器人破解系统,通行短语字母必须变形,或者用随机的直线和点进行部分模糊处理. /* 生成验证