关于 验证码 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;@Overrideprotected 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() {//初始化对象xmlhttpcreateXmlHttp();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, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {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