Jsp+jquery implementation of the picture Verification Code (when the main page does not refresh the picture can be replaced) __js

The principle is as follows:

1. Write a class to generate a picture file (Image.java)

2. Write a JSP file to generate the picture (createimage.jsp)

3. Write a homepage to display the Picture Verification Code (IMAGE.JSP)

4. Write a JSP file, dynamically load the picture, used to replace the picture Verification Code (IMAGESRC.JSP)

5. Write a JSP file that verifies the correctness of the Picture verification code

In the image.jsp to get the picture generated in createimage.jsp, and then display, click to change the picture, automatically in the display Picture <td> load imagesrc.jsp page content

(This page contains only one picture) because the browser does not repeatedly access the same URL's resources. So each time you access createimage.jsp, you append a timestamp to the back, so in the image.jsp without refreshing the entire page can be replaced by the picture verification code, each time to obtain the verification code, the code picture contains the string value stored in the session, the user fills in the acquisition of the verification code after the submission, through the Java The script compares the user's fill with the value in the session, and the correct commit succeeds or the commit fails.

The code is as follows:

1, generate the Picture Java class: Image.java

Package test.image; Import Java.awt.Color; Import Java.awt.Font; Import Java.awt.Graphics; Import Java.awt.image.BufferedImage; Import Java.io.BufferedOutputStream; Import Java.io.File; Import java.io.FileNotFoundException; Import Java.io.FileOutputStream; Import java.io.IOException; Import Java.io.OutputStream; Import Java.util.Random; Import Javax.imageio.ImageIO; Import Javax.servlet.http.HttpServletResponse; public class Image {httpservletresponse response//Authentication code picture can appear in the character set, can modify the private char maptable[] = {' A ', ' B ', ' C ', ' d ', ' e ', ' H ', ' J ', ' K ', ' m ', ' n ', ' P ', ' Q ', ' R ', ' s ', ' t ', ' u ', ' V ', ' w ', ' x ', ' y ', ' z ', ' 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 '}; Public Image (HttpServletResponse response) {This.response = response.} public String getcertpic (int width, int height) { if (width <= 0) {width = = = = (Height <= 0) {height = 20;} BufferedImage image = NEW bufferedimage (width, height, bufferedimage.type_int_rgb); Gets the graphics context Graphics g = image.getgraphics (); Set the background color g.setcolor (new color (0xDCDCDC)); G.fillrect (0, 0, width, height); Draw a Border G.setcolor (Color.Black); G.drawrect (0, 0, width-1, height-1); Randomly generated verification code String strensure = ""; 4 represents a 4-bit captcha, and if you want to generate a multiple-bit authentication code, increase the value for (int i = 0; i < 4; i++) {strensure + = maptable[(int) (Maptable.length * Math.rando M ())]; ///Display the verification code in the image, add the DrawString statement G.setcolor (color.red) If you want to generate more bits of the verification code; G.setfont (New Font ("Atlantic Inline", Font.plain, 18)); String str = strensure.substring (0, 1); g.DrawString (str, 8, 17); str = strensure.substring (1, 2); g.DrawString (str, 20, 15); str = strensure.substring (2, 3); g.DrawString (str, 35, 18); str = strensure.substring (3, 4); g.DrawString (str, 45, 15); Randomly generated 10 interference points Random Random = new Random (); for (int i = 0; i < i++) {int x = random.nextint (width); int y = random.nextint (height); g.drawoval (x, Y, 1, 1);} Releases the graphics context g.dispose (); try {//Output image to page imagEio.write (Image, "JPEG", Response.getoutputstream ()); catch (IOException e) {return "";} finally{try {response.getoutputstream (). Flush (); Response.getoutputstream (). Close ();} catch (IOException e) {//TODO A Uto-generated Catch block E.printstacktrace (); } return strensure; } }

2, generate the picture JSP file: createimage.jsp

<%@ page contenttype= "image/jpeg" import= "test.image.*"%> <% ("Response.setheader", "Pragma"); Response.setheader ("Cache-control", "No-cache"); Response.setdateheader ("Expires", 0); Image image = New image (response); String rs = image.getcertpic (60,20); Session.setattribute ("Imagestring", RS); %>

3, display the Picture Verification code page: image.jsp

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

4, for loading dynamic picture of the page: imagesrc.jsp

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

5. Get the JSP file of the string content in the picture verification code:

<%@ page language= "java" pageencoding= "Utf-8"%> <% ((String) out.print ("Session.getattribute")); %>

image.jsp JavaScript code:

function Changeimage () {$ ("table"). Find ("#imageNode"). Load ("imagesrc.jsp");} function validate () {var text = $ ("table" ). Find ("#inputNode"). attr ("value"); $.ajax ({type: "POST", url: "getsession.jsp", Success:function (msg) {msg = Jquery.trim (msg); if (msg==text) {alert (" Success "); }else{alert ("fail"); $ ("table"). Find ("#inputNode"). focus ();} }); }

Once you have finished writing the necessary files, you can verify them in your browser.