动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱
2017-02-15 12:08
281 查看
在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能。
一、涉及技术
该功能需要用到AJAX异步传输技术,这样能保证在点击“看不清,重新获取验证码”按钮时,能够不刷新页面其它内容而局部刷新验证码图片内容。
还需要用到Servlet技术,这里会在Servlet的GET方法中通过Java内置的画图工具绘制一个验证码图片,可以在HTML的<img/>标签中的src属性获取缓存图片资源。
二、各个页面及代码
1.index.html,是一个简单的表单,上面仅有简单几项内容,AJAX异步传输技术也在上面体现,代码中有详细注释。
注意:ValidateCodeServlet要在web.xml中配置,配置代码如下: <servlet>
<servlet-name>ValidateCodeServlet</servlet-name>
<servlet-class>com.yykj.servlet.ValidateCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidateCodeServlet</servlet-name>
<url-pattern>/ValidateCodeServlet</url-pattern>
</servlet-mapping>
一、涉及技术
该功能需要用到AJAX异步传输技术,这样能保证在点击“看不清,重新获取验证码”按钮时,能够不刷新页面其它内容而局部刷新验证码图片内容。
还需要用到Servlet技术,这里会在Servlet的GET方法中通过Java内置的画图工具绘制一个验证码图片,可以在HTML的<img/>标签中的src属性获取缓存图片资源。
二、各个页面及代码
1.index.html,是一个简单的表单,上面仅有简单几项内容,AJAX异步传输技术也在上面体现,代码中有详细注释。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>验证码测试</title> </head> <body> <script style="javascript"> var xmlHttp; //异步刷新验证码 function reload() { //针对不同浏览器,不同的方式生成xmlHttp对象 try{ xmlHttp=new XMLHttpRequest(); }catch(e){ try{ xmlHttp=new ActiveXObject("Msxml2.XMLHttp"); }catch(e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHttp"); }catch(e){ alert("你的浏览器不支持AJAX") ; return false; } } } var url="ValidateCodeServlet"; xmlHttp.onreadystatechange = deal;//该属性为一个函数 xmlHttp.open("GET", url, true);//初始化xmlHttp xmlHttp.send(null);//发送 } function deal(){ if(xmlHttp.readyState==4){//当状态值为4时,接收到服务器传输的信息 //重新从servlet获得图片资源,并且防止浏览器缓存,加了时间 document.getElementById("validate_code").src = "ValidateCodeServlet?" + new Date().getTime(); } } </script> <form method="post" action="check.jsp"> <input type="text" name="input_code"/> <img src="ValidateCodeServlet" id="validate_code"/> <a href="#" onclick="reload()">看不清楚,换一个</a> <input type="submit"/> </form> </body> </html>2.check.jsp,用来判断用户表单提交的验证码是否正确,也是较为简单的Java代码。
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <title>检验验证码</title> </head> <body> <% String code = (String) session.getAttribute("code"); String input_code = request.getParameter("input_code"); if (code != null && input_code != null) { input_code = input_code.toUpperCase(); if (code.equals(input_code)) { out.print("验证码正确"); } else { out.print("验证码错误"); } } %> <a href="index.html">返回填写页面</a> </body> </html>3.ValidateCodeServlet,生成验证码图片的文件,代码中有详细的注释。
package com.yykj.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.*; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; public class ValidateCodeServlet extends HttpServlet { private Random random = new Random(); private String[] allCodes = { "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" }; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setHeader("Pragma", "No-cache"); resp.setHeader("Cache-Control", "No-cache"); resp.setDateHeader("Expires", 0);//禁止客户端缓存页面 resp.setContentType("image/jpg");//设置响应正文类型为图片 int height = 20; int width = 60; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics();//获取处理图片的画笔 g.setColor(getRandomColor(200, 250));//设置背景色 g.fillRect(0, 0, width, height);//画一个矩形 g.setFont(new Font("Times New Roman", Font.PLAIN, 18));//设置字体 g.setColor(getRandomColor(160, 200));//设置干扰线的颜色 for (int i = 0; i < 100; i++){//画一百条干扰线 int x = random.nextInt(width); int y = random.nextInt(height); int x1 = random.nextInt(10); int y1 = random.nextInt(10); g.drawLine(x, y, x1, y1);//干扰线的两个顶点坐标 } String strCode = ""; for (int i = 0; i < 4; i++){//生成四个随机字符 String strNumber = allCodes[random.nextInt(36)]; strCode += strNumber; g.setColor(getRandomColor(20, 120)); g.drawString(strNumber , 13 * i + 3, 16); } req.getSession(true).setAttribute("code", strCode);//将生成的验证码存入session g.dispose();//释放图像的上下文资源 ImageIO.write(image, "JPEG", resp.getOutputStream());//输出JPEG格式图像 resp.getOutputStream().flush();//刷新输出流 resp.getOutputStream().close();//关闭输出流 } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } //生成随机RGB颜色 private Color getRandomColor(int min, int max){ int r = min + random.nextInt(max - min); int b = min + random.nextInt(max - min); int g = min + random.nextInt(max - min); return new Color(r, b, g); } }
注意:ValidateCodeServlet要在web.xml中配置,配置代码如下: <servlet>
<servlet-name>ValidateCodeServlet</servlet-name>
<servlet-class>com.yykj.servlet.ValidateCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidateCodeServlet</servlet-name>
<url-pattern>/ValidateCodeServlet</url-pattern>
</servlet-mapping>
相关文章推荐
- 动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱
- 使用ajax技术无刷新动态调用股票信息(追加分时图显示)
- 使用ajax技术无刷新动态调用股票信息
- 验证码生成 点击刷新 ajax校验
- Ajax的常用技巧(6)---实现web页面局部动态刷新
- AJAX实现验证码区的局部刷新(初学AJAX小结)
- 用AJAX编写用户注册实例及技术小结(局部刷新)
- AJAX局部刷新技术:
- ajax+html5 pushState 技术实现页面局部刷新
- 利用ajax和JSP技术实现网页中表单的局部刷新(只刷新表单数据,而不刷新整个页面)
- Demo:充分利用 Ajax 技术 来体现页面局部刷新 效果(获取天气预报情况)
- J2EE动态生成验证码可刷新
- java web开发:ajax技术(一)——局部刷新技术的实现
- 使用ajax技术无刷新动态调用股票信息
- 使用AJAX技术实现网页无闪自动局部刷新
- 使用ajax技术无刷新动态调用股票信息
- 运用 Ajax技术 实现一个局部刷新显示的小例子
- 使用ajax技术无刷新动态调用股票信息
- 我使用AJAX技术制作的动态刷新网页和部分源代码
- 1.MVC框架复习 2.Ajax加强 3.搜索建议 4,三级联动 5、刷新分页 6、Ajax局部动态更新数据