关于 验证码 Ajax,jQuery,Cookie与Session 总结

关于这些技术在网上有很多代码，在这就不再过多讲解；仅仅是把我自己的代码贴出来；

1：验证码

原理：通过请求在后台Java代码生成验证码的图片传到页面

1）jsp标签

<img id="verification" src="<%=basePath%>verification" alt="点击刷新验证码" onclick="verification();" />

2）Java代码

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
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;

public class VerificationServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int width = 120;
int height = 30;

//创建一张图片
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

//在图片上创建一个画笔对象画验证码
Graphics graphics = img.getGraphics();

//验证码背景
graphics.setColor(Color.pink);
graphics.fillRect(0, 0, width, height);

//设置验证码字体颜色大小
graphics.setColor(Color.BLACK);
graphics.setFont(new Font("宋体", Font.BOLD, 20));

//字母的角度
Graphics2D gcs = (Graphics2D) graphics;
String strF = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
Random r = new Random();
int x = 10;
String str = null;
StringBuffer stringBuffer = new StringBuffer();
//验证码的随机随机四个字母
for (int i = 0; i < 4; i++) {
int ran = r.nextInt(36);
str = String.valueOf(strF.charAt(ran));
stringBuffer.append(str);
//设置角度
double t = r.nextInt(60) * Math.PI / 180;
gcs.rotate(t, x, 18);
gcs.drawString(str, x, 18);
gcs.rotate(-t, x, 18);
x += 30;
}

System.out.println("验证码：" + stringBuffer.toString());
request.getSession(false).setAttribute("sbf", stringBuffer.toString());

//设置干扰线的颜色
graphics.setColor(Color.blue);

for (int i = 0; i < 7; i++) {
int x1 = r.nextInt(100);
int x2 = r.nextInt(width);
int y1 = r.nextInt(height);
int y2 = r.nextInt(height);
graphics.drawLine(x1, y1, x2, y2);
}

//关闭资源
graphics.dispose();
gcs.dispose();
//将图片绘制到页面
ImageIO.write(img, "jpg", response.getOutputStream());
}

}

2：Ajax

原理：在js中发送相应请求 在后台验证后利用回调方法返回后台处理结果 - 实现局部刷新

1）jsp标签

<input type="text" id="code" name="codeAjax" onblur="verificationAjax();" />

2）js代码

var xmlhttp; //创建XmlHttpRequest对象
function verificationAjax() {
//初始化对象xmlhttp
createXmlHttp();
var code = document.getElementById("code").value;
if (code != "") {
xmlhttp.onreadystatechange=function() {//回调方法
if (xmlhttp.readyState==4 && xmlhttp.status==200) {//在W3C中有解释
document.getElementById("span").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "<%=basePath%>verificationAjax?codeAjax="+code, true);
xmlhttp.send();
} else {
document.getElementById("span").innerHTML = "请输入验证码";
}
};

function createXmlHttp() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
};

3）Java代码

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 VerificationAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IO
a399
Exception {

String code = req.getParameter("codeAjax");
String seriveCode = (String) req.getSession(false).getAttribute("sbf");

PrintWriter printWriter = resp.getWriter();
if (code.equalsIgnoreCase(seriveCode)) {
printWriter.write("");
} else {
printWriter.write("验证码输入错误！");
}
}
}

3：jQuery

原理：jQuery封装了ajax的代码所以在jsp中的页面会简洁一些 - JSP Java与上边的ajax一样 在这里就不重写了

1）js代码

需要注意的是一定要已经引入的 jQuery.js 的代码 这个代码可以在网上直接下载

<script type="text/javascript" src="<%=basePath%>static/js/jquery.js"></script>

function validateCode() {
var code = document.getElementById("code").value;
if (code != "") {
$.ajax({
type : "get",//请求方式
url : "<%=basePath%>ValidateServlet",
date : "code=" + code,//请求数据
//回调函数
success : function(msg) {
document.getElementById("span").innerHTML = msg;
}
});
} else {
alert("请输入验证码");
}
}

4：Cookie 与 Session

Cookie存在客户端 一个浏览器访问一个网站使用同一个Cookie域

Session存在服务器一个浏览器访问一个网站可以有多个Session