下面就要开始演示前台的图片验证技术了。
前台的图片验证技术
这个项目的结构图：
index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function changImg(){ var img = document.getElementById("servletImg"); var d = new Date(); var time = d.getTime();//如果没有这个 //下面这一句不会起作用，因为浏览器的缓存技术，图片并不会刷新 //img.src="/myHelloWeb/servlet/ImageServlet"; img.src="/myHelloWeb/servlet/ImageServlet?"+time; //?号后面的东西是通过get方式传递的 } </script> </head> <body> 这是我的手动主页！ <br/> <img id="servletImg" src="/myHelloWeb/servlet/ImageServlet" /><a href="javascript:changImg()">看不清</a> </body> </html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>ImageServlet</servlet-name> <servlet-class>cn.hncu.img.ImageServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImageServlet</servlet-name> <url-pattern>/servlet/ImageServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
ImageServlet.java
package cn.hncu.img; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.PrintWriter; import java.util.Date; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ImageServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //告诉客户端，输出的格式 response.setContentType("image/jpeg"); int width = 80; int height = 40; int lines = 10; BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); //设置背景色 g.setColor(Color.WHITE); g.fillRect(0, 0, width, height); //设置字体 g.setFont(new Font("宋体", Font.BOLD, 20)); //随机数字 Random r = new Random(new Date().getTime()); for(int i=0;i<4;i++){ int a = r.nextInt(10); int y = 10+r.nextInt(20);//10~30范围内的一个整数，作为y坐标 Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)); g.setColor(c); g.drawString(""+a, 5+i*width/4, y); } //干扰线 for(int i=0;i<lines;i++){ Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)); g.setColor(c); g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height)); } g.dispose();//类似于流中的close()带动flush()---把数据刷到img对象当中 ImageIO.write(img, "JPG", response.getOutputStream()); } }
演示结果：
下面这个是在index.jsp中：
如果是用这句：
img.src=”/myHelloWeb/servlet/ImageServlet”;
大家可以看看响应头：
再看看用这句的响应头：
img.src=”/myHelloWeb/servlet/ImageServlet?”+time;
多了个Date响应！
因为时间一直在变，所以每次点看不清，都会再向服务器请求一次，而不会因为浏览器的缓存，而不去请求了。
验证码就先到这里结束啦。
