【js小案例】使用ajax实现验证码功能
来源:互联网 发布:2009年流行的网络歌手 编辑:程序博客网 时间:2024/06/04 19:32
首先创建一个验证码
<%@ page contentType="image/jpeg; charset=utf-8" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"pageEncoding="UTF-8"%><!-- 以上导入awt和awt.image包 --><%!//获取随机颜色public Color getColor(){Random random = new Random();//使用rgb()随机产生颜色int r = random.nextInt(256);int g = random.nextInt(256);int b = random.nextInt(256);return new Color(r,g,b);}//获取随机数字 产生一个4位数public String getNum(){String str = "";Random random = new Random();for(int i = 0;i < 4;i++){str += random.nextInt(10); //0-9}return str;}%><% /* 清除缓存 */ response.setHeader("pragma", "mo-cache");response.setHeader("cache-control", "no-cache");response.setDateHeader("expires", 0);//产生矩形框BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);//获取画笔工具Graphics g = image.getGraphics();//设置矩形框的颜色g.setColor(new Color(200,200,200));//设置坐标和宽高g.fillRect(0, 0, 80, 30); //随机产生干扰线for(int i = 0;i < 30;i++){Random random = new Random();int x = random.nextInt(80);int y = random.nextInt(30);int x1 = random.nextInt(x + 10);int y1 = random.nextInt(y + 10);//设置随机颜色g.setColor(getColor());//画出来g.drawLine(x, y, x1, y1);}//字的颜色和数字g.setFont(new Font("Microsoft YaHei",Font.BOLD,16));g.setColor(Color.BLACK);//获取随机数字String checkNum = getNum();//给字拼接空格StringBuffer sb = new StringBuffer();for(int i = 0;i < checkNum.length();i++){sb.append(checkNum.charAt(i) + " ");}//画出数字g.drawString(sb.toString(), 15, 20);//存入session域中session.setAttribute("CHECKNUM", checkNum); //例如1010//将图像以jpeg的形式通过字节流输出ImageIO.write(image, "jpeg", response.getOutputStream());//清除缓存out.clear();//放入body中out = pageContext.pushBody();%>
将验证码压缩成图片,在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据
<%@ 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>验证码</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"><style type="text/css">table{margin: 100px auto;}</style> </head> <body> <table border="0" align="center"> <tr> <td>验证码</td> <td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td> <td><img alt="加载失败" src="image.jsp"></td> <td id="show">√√√</td> </tr> </table> </body> <script type="text/javascript"> //去除空格function trim(str){//从左侧开始替换空格str = str.replace(/^\s*/,"");//从左侧开始替换空格str = str.replace(/\s$/,"");return str;} </script> <script type="text/javascript"> //创建ajax对象 function createAjax(){var ajax = null;try{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e){try{ajax = new XMLHttpRequest();}catch(e1){alert("请更换浏览器");}}return ajax; } </script> <script type="text/javascript"> document.getElementById("checkcodeID").onkeyup = function(){ var checkcode = this.value; //去除空格 checkcode = trim(checkcode); if(checkcode.length == 4){ //获取ajax对象 var ajax = createAjax(); //获取去空格的内容 var method = "POST"; var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime(); //准备发送异步请求 ajax.open(method, url); //设置请求头POST提交方式才需要ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");//拼接实体内容var content = "checkcode=" + checkcode; //发送请求 ajax.send(content); //监听服务器状态变化 ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //获取服务器内容 var tip = ajax.responseText; //获取图片路径 然后进行放入td中 var img = document.createElement("img");img.src = tip;img.style.width = "14px";img.style.height = "14px";var td = document.getElementById("show");td.innerHTML = "";td.appendChild(img); } } } } } </script></html>
然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出
public class CheckcodeServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");//图片路径String tip = "images/MsgError.gif";String checkcode = req.getParameter("checkcode");//测试System.out.println(checkcode);//获取session域中的数字String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM");//判断if (checkcode.equals(checkcodeService)) {tip = "images/MsgSent.gif";}//输出路径PrintWriter pw = resp.getWriter();pw.write(tip);pw.flush();pw.close();}}当输入第4个数字的时候就会出现提示
运行结果:
阅读全文
0 0
- 【js小案例】使用ajax实现验证码功能
- js ajax实现短信验证码功能
- js ajax实现短信验证码功能
- Ajax验证用户名小案例
- Ajax+Struts2实现验证码验证功能
- 验证码功能js实现
- thinkphp验证码使用小案例
- ajax实现短信验证码功能
- Ajax+Struts2实现验证码验证功能实例代码
- AJAX(二)-实现验证码异步验证功能
- js实现网页验证码功能
- js中实现验证码功能
- JS实现随机验证码功能
- js实现简单验证码功能!
- Java案例之随机验证码功能实现
- Struts2&ajax实现用户名唯一验证案例
- Ajax使用原生态JS实现用户名是否存在验证
- 使用ajax实现发送验证码业务
- 关于实现自执行数据库备份bat生成和使用
- RocketMQ源码解析-PushConsumer(2)
- Linux内核:IO设备通信的控制方式
- linux编译源码是内存不足的解决办法
- poj 3237 Tree(树链剖分)
- 【js小案例】使用ajax实现验证码功能
- web页面基础一
- Android系统APP安装流程
- JS获取浏览器和和设备相关属性整理
- 七步带你认识计算机视觉(Computer Vision)[转载]
- python requests请求http
- 管理系统分区问题
- conversion类型转换1(隐式转换)----C++学习之路
- 雕虫小技用Win 10