AJAX(二)-实现验证码异步验证功能
2023-09-27 14:24:55 时间
案例实现效果
用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错
前端代码
checkcode.jsp
- <%--
- Created by IntelliJ IDEA.
- User: cxspace
- Date: 16-8-18
- Time: 下午7:45
- To change this template use File | Settings | File Templates.
- --%>
- <%@ page contentType="text/html;charset=UTF-8" language="java" %>
- <html>
- <head>
- <title>验证码检查</title>
- <script type="text/javascript" src="js/ajax.js"></script>
- </head>
- <body>
- <form>
- <table border="0" align="center">
- <th>验证码:</th>
- <td><input size="3" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
- <td><img src="check/checkImage.jsp" /></td>
- <td id="res"></td>
- </table>
- </form>
- <script type="text/javascript">
- //去掉两边空格
- function trim(str) {
- //正则表达式去掉左边空格
- str = str.replace(/^\s*/,""); //换掉左边空格
- str = str.replace(/\s*$/,""); //换掉右边空格
- return str;
- }
- </script>
- <script type="text/javascript">
- document.getElementById("checkcodeID").onkeyup = function () {
- var checkcode = this.value;
- var checkcode = trim(checkcode);
- if (checkcode.length == 4){
- var ajax = createAJAX();
- var method = "POST";
- var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
- ajax.open(method,url);
- 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;
- var img = document.createElement("img");
- img.src = tip;
- img.style.width = "14px";
- img.style.height = "14px";
- var td = document.getElementById("res");
- td.innerHTML="";
- td.appendChild(img)
- }
- }
- }
- }else {
- var td = document.getElementById("res");
- td.innerHTML = "";
- }
- }
- </script>
- </body>
- </html>
ajax.jsp
- //创建AJAX异步对象,即XMLHttpRequest
- function createAJAX(){
- var ajax = null;
- try{
- ajax = new ActiveXObject("microsoft.xmlhttp");
- }catch(e1){
- try{
- ajax = new XMLHttpRequest();
- }catch(e2){
- alert("你的浏览器不支持ajax,请更换浏览器");
- }
- }
- return ajax;
- }
checkImage.jsp
- <%--
- Created by IntelliJ IDEA.
- User: cxspace
- Date: 16-8-18
- Time: 下午5:39
- To change this template use File | Settings | File Templates.
- --%>
- <%@ page language="java" pageEncoding="UTF-8" %>
- <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
- <%!
- //获取随机颜色值
- public Color getColor(){
- Random random = new Random();
- int r = random.nextInt(256);
- int g = random.nextInt(256);
- int b = random.nextInt(256);
- Color color = new Color(r,g,b);
- return color;
- }
- //获取四位随机数连成的字符串
- public String getNum(){
- String str = "";
- Random random = new Random();
- for(int i = 0 ; i < 4 ; i++){
- str += random.nextInt(10);
- }
- 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 < 20 ; 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,x+x1,y+y1);
- }
- g.setFont(new Font("serif",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(),10,20);
- session.setAttribute("checkNum",checkNum);
- ImageIO.write(image,"jpeg",response.getOutputStream());
- out.clear();
- out = pageContext.pushBody();
- %>
后端代码
action配置
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
- "http://struts.apache.org/dtds/struts-2.3.dtd">
- <struts>
- <package name="myPackage" namespace="/" extends="struts-default">
- <action name="checkRequest"
- class="checkcode.CheckcodeAction"
- method="check">
- </action>
- </package>
- </struts>
checkcode.CheckcodeAction
- package checkcode;
- import com.opensymphony.xwork2.ActionContext;
- import com.opensymphony.xwork2.ActionSupport;
- import org.apache.struts2.ServletActionContext;
- import javax.servlet.http.HttpServletResponse;
- import java.io.PrintWriter;
- /**
- * Created by cxspace on 16-8-18.
- */
- public class CheckcodeAction extends ActionSupport{
- private String checkcode;
- public void setCheckcode(String checkcode) {
- this.checkcode = checkcode;
- }
- public String check() throws Exception {
- String tip = "images/MsgError.gif";
- String checkcodeServer = (String) ActionContext.getContext().getSession().get("checkNum");
- if (checkcode.equals(checkcodeServer)){
- tip="images/MsgSent.gif";
- }
- HttpServletResponse response = ServletActionContext.getResponse();
- response.setContentType("text/html;charset=UTF-8");
- PrintWriter pw = response.getWriter();
- pw.write(tip);
- pw.flush();
- pw.close();
- return null;
- }
- }
-
Created by cxspace on 16-8-18.
*/
public class CheckcodeAction extends ActionSupport{private String checkcode;
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}public String check() throws Exception {
String tip = "images/MsgError.gif"; String checkcodeServer = (String) ActionContext.getContext().getSession().get("checkNum"); if (checkcode.equals(checkcodeServer)){ tip="images/MsgSent.gif"; } HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); return null;
}
}
相关文章
- Struts2 处理AJAX请求
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
- 【jquery】通过【ajax】获取数据并转换成【Json】
- javascript使用jQuery加载CSV文件+ajax关闭异步
- Vue - 将 Ajax 异步网络请求改为同步执行,等待 Promise 风格的接口请求完毕再执行后面的代码(适用于 “等待接口数据获取成功后,在执行下面的语句“ 等需求)超详细示例及注释解决方案
- MVC Ajax Helper或jQuery异步方式加载部分视图
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第1章 Web交互开发相关技术概述
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.3 Web实时交互方式——轮询、长轮询、长连接及推送
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4 内容安排
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第2章 iframe实现模拟异步交互
- Ajax
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
- [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)
- ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)
- 发送多个异步请求 ;发送多个ajax请求
- AJAX中同步和异步的区别和使用场景