AJAX-实现验证码异步验证功能

案例实现效果

用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错

前端代码

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;
    }
}

  

  

  

时间: 2024-11-05 06:04:10

AJAX-实现验证码异步验证功能的相关文章

ajax注册页面异步验证

ajax的原理大家可以看上图 如何获得Ajax对象? XMLHttpRequest没有标准化,要区分浏览器.function getXhr(){var xhr = null;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{//ie浏览器xhr = new ActiveXObject('MicroSoft.XMLHttp');}return xhr;} 下面我把代码贴出来: 1.注册页面regist.jsp <%

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到现在经常使用,逐渐有了深入的认识.今天,如果想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在详细讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所示: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待,等待服务器响应,等待浏览器刷新,等待请求返回和生成新的页面成为了程序员们的最最头疼的难题.随着Ajax的出现使web应用程序变得更完善,更友

【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所看到的: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待.等待server响应,等待浏览器刷新.等待请求返回和生成新的页面成为了程序猿们的最最头疼的难题.随着Ajax的出现使web应用程序变得

struts2+ajax实现异步验证

由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来.现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术. 首先我们来看一下我们的form表单:

问答项目---登陆验证码点击切换及异步验证验证码

输出验证方法: public function verify(){ $config = array( 'length' => 2, 'reset' => false, 'useCurve' => false, 'useNoise' => false, ); $obj = new \Think\Verify($config); $obj->entry(); } 调用: <img src="{:U('verify')}"/ id='code'> &

MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证

原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异步 3.js或jQuery提交后台 本文体验Ajax.BeginForm()方法.   View model using System; using System.ComponentModel.DataAnnotations;   namespace XHelent.Models { public

ajax实现登陆表单验证功能

ajax实现登陆表单验证功能:使用ajax进行表单登陆验证功能更为的人性化,下面提供一个表单验证的实例代码,代码较为简单,仅仅作为演示之用而已,多实用的ajax表单验证功能都较为复杂.下面分布分出代码:一.静态页面表单部分代码: <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <scri

Mvc音乐商店demo的ajax异步删除功能总结

刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的demo. 其他功能都很快实现了,但是那个异步的删除搞了好久,当然了,主要还是因为我不懂JavaScript,不懂jQuery,更不懂ajax.但最后还是勉强实现了. 首先在前台页面加一个属性,用来标记要删除的行的 id:data-id="@item.AlbumId",然后在每行中标记行号: