頁面文件
<%@ 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%>">
<title>My JSP 'index.jsp' starting page</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//liubo
var req;
function validate() {
//獲取表單提交的內容
var idField = document.getElementById("code");
//訪問validate.do這個servlet，同時把獲取的表單內容idField加入url字符串，以便傳遞給validate.do
var url = "CheckServlet?code=" + escape(idField.value);
//創建一個XMLHttpRequest對象req
if (window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}
/*
open(String method,String url, boolean )函數有3個參數
method參數指定向servlet發送請求所使用的方法，有GET,POST等
boolean值指定是否異步，true爲使用，false爲不使用。
我們使用異步才能體會到Ajax強大的異步功能。
*/
req.open("GET", url, true);
//onreadystatechange屬性存有處理服務器響應的函數,有5個取值分別代表不同狀態
req.onreadystatechange = callback;
//send函數發送請求
req.send(null);
}
//回調函數
function callback() {
if (req.readyState == 4 && req.status == 200) {
var check = req.responseText;
show(check);
}
}
//在頁面顯示是否驗證碼正確提示
function show(str) {
if (str == "OK") {
var show = "<img src='image/ok.png'/>";
document.getElementById("info").innerHTML = show;
} else if (str == "NO") {
var show = "<font color='red'>請重新輸入！</font>";
document.getElementById("info").innerHTML = show;
}
}
</script>
<!-- 點擊更換驗證碼 -->
<script type="text/javascript">
function change() {
var img = document.getElementById("code1");
img.src = "CheckCodeServlet?service" + Math.random();
}
</script>
</head>
<body>
<form>
<img id="code1" src="CheckCodeServlet">
<a href="javascript:" οnclick="change()">看不清刷新</a>
<input type="text" id="code" name="code" οnblur="validate()">
<span id="info"></span>
</form>
</body>
</html>
Java生成驗證碼圖片的servlet
package com.code;
/**
* @author liubo
*/
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
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;
import javax.servlet.http.HttpSession;
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 放到session中的KEY
public static final String RANDOMCODEKEY = "RANDOMCODEKEY";
private Random random = new Random();
// 隨機產生的字符串
private String randString = "0123456789";
private int width = 80;
private int height = 26;
private int stringNum = 3;
/*
* 獲得字體
*/
private Font getFont() {
return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
}
/*
* 獲得顏色
*/
private Color getRandColor(int fc, int bc) {
if (fc > 255) {
fc = 255;
}
if (bc < 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc - 16);
int g = fc + random.nextInt(bc - fc - 14);
int b = fc + random.nextInt(bc - fc - 18);
return new Color(r, g, b);
}
public void getRandcode(HttpServletRequest request,
HttpServletResponse response) {
HttpSession session = request.getSession();
// BufferedImage類是具有緩衝區的image類，image類是用於描述圖像信息的類
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_BGR);
// 產生image對象的graphics對象，該對象可以在圖像上進行各種繪製操作
Graphics g = image.getGraphics();
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
g.setColor(getRandColor(110, 133));
String randomString = "";
for (int i = 0; i <= stringNum; i++) {
randomString = drowString(g, randomString, i);
}
session.removeAttribute(RANDOMCODEKEY);
session.setAttribute(RANDOMCODEKEY, randomString);
g.dispose();
try {
// 將內存中的圖片通過流動形式輸出到客戶端
ImageIO.write(image, "JPEG", response.getOutputStream());
} catch (Exception e) {
e.printStackTrace();
}
}
/*
* 繪製字符串
*/
private String drowString(Graphics g, String randomString, int i) {
g.setFont(getFont());
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
.nextInt(121)));
String rand = String.valueOf(getRandomString(random.nextInt(randString
.length())));
randomString += rand;
g.translate(random.nextInt(3), random.nextInt(3));
g.drawString(rand, 13 * i, 16);
return randomString;
}
/*
* 獲取隨機字符
*/
public String getRandomString(int num) {
return String.valueOf(randString.charAt(num));
}
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 設置相應的類型，告訴瀏覽器輸出的內容爲圖片
response.setContentType("image/jpeg");
// 設置響應頭信息，告訴瀏覽器不要緩存此內容
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expire", 0);
try {
getRandcode(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
service(req,resp);
}
}
服務器端校驗的servlet
package com.code;
/**
* @author liubo
*/
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String check = request.getParameter("code");
try {
String code = (String) request.getSession().getAttribute(
"RANDOMCODEKEY");
if (code.equals(check)) {
out.write("OK");
} else {
out.write("NO");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
out.close();
}
}
}
