ajax+jsp无刷新验证码

最新推荐文章于 2024-09-24 11:46:44 发布

iloveran

最新推荐文章于 2024-09-24 11:46:44 发布

阅读量1.5k

点赞数

分类专栏： JAVA基础文章标签： ajax jsp random function string xmlhttprequest

本文链接：https://blog.csdn.net/iloveran/article/details/4122562

版权

JAVA基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

img.jsp:
<%@ page contentType="text/html; charset=GBK" language="java"
import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<html>
<head>
  <title>图片验证</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <script src="/js/net.js"></script>
</head>

<body>
  AJAX(无刷新及时提示)验证码实例！
  <hr>
  <%
   String num = request.getParameter("num");
   String random = (String) session.getAttribute("random");
   String name = request.getParameter("name");
   if (num != null && random != null && name != null) {
    if (num.equals(random)) {
     out
     .println("<font style=/"color:green;font-weight:bold/">恭喜您，验证码输入成功，这里是提交结果页面，可以写入数据库了！</font> <a href=/"img.jsp/">返回再测试</a><br>");
     out.println("您的名字是：" + name);
     out.println("<br>");
     out.println("您输入的是：" + num);
     out.println("验证码是：" + random);
     out.println("</body>");
     return;//javascript:history.go(-1)
    }
   }
  %>
<script type="text/javascript">
var times=0;
function subform(){
var gtext=this.req.responseText;
   var info=document.getElementById("info");
   if(gtext.indexOf("validate_successful")!=-1){
    //info.innerHTML="<font color=green>验证码通过</font>";
    document.forms["myform"].submit();
    //当得到的值表示合法，则验证码通过。
   }else{
       times++;
     if(times>=3){//如果连接3次输入错误，则重载图片，可以防止作弊和用户看不清图片;
      info.innerHTML="接连3次输入错误。更新验证码，请重新输入";
        document.forms["myform"].num.value="";
        show(document.getElementById('random'));
        times=0;
      }else{
      info.innerHTML="第"+times+"次验证码错误,请注意区分大小写 ";
    }
   document.forms["myform"].num.select();
   }

}
function validata(obj){
var enter=true;
var info=document.getElementById("info");
var msg="";
if(obj.name.value.match(/^/s*$/g)){//如果未输入名字，提示
   msg+="请输入您的姓名<br>";enter=false
}
if(obj.num.value.match(/^/s*$/g)){//如果未输入验证码，提示
   msg+="请输入验证码<br>";enter=false
}
if(enter==false){
     info.innerHTML=msg;
     return false;
}
var url="num.jsp?num="+obj.num.value;
var newxmlhttp=new net.ContentLoader(url,subform,"","get",null,null);
return false;
}
function show(o){
//重载验证码
var timenow = new Date().getTime();
o.src="random.jsp?d="+timenow;
/*
//超时执行;
setTimeout(function(){
   o.src="random.jsp?d="+timenow;
}
   ,20);
   */
}
</script>
  <form action="img.jsp" name="myform" method="post"
   οnsubmit="return validata(this);">
   您的姓名：
   <input type="text" name="name" size=10>
   (为了更好地说明此例，特加姓名一项)
   <br>
   验证码：
   <input type="text" name="num" size=10 maxlength="4">
   <img src="random.jsp" id="random">
   <a href="javascript:show(document.getElementById('random'))">验证码看不清</a>
   <br>
   <br>
   <input type="submit" value=" 提交 ">
   <br>
   <div id=info style="color: red; padding: 10px; font-size: 12px;"></div>
  </form>
</body>
</html>

num.jsp:

<%@ page contentType="text/html; charset=GBK" language="java"
import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%

request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<%
String num = request.getParameter("num");
String random = (String) session.getAttribute("random");
if (num != null && random != null) {
  if (!num.equals(random)) {
    out.println("<script>alert('验证码错误！请重试。')</script>");
    out.println("<script>history.go(-1)</script>");
    //response.sendRedirect("img.jsp");
   out.print("validate_failed:" + random);
  } else {
   //out.println("<center>验证成功！</center>");
   out.print("validate_successful:" + random);
  }
}
%>

random.jsp:

<%@ page autoFlush="false"
import="java.util.*,java.awt.*,java.awt.image.*,
com.sun.image.codec.jpeg.*,java.util.*,
java.io.File,java.io.FileOutputStream,javax.imageio.ImageIO"
pageEncoding="GBK"%>

<%

request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<%
String chose = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

char display[] = { '0', ' ', '0', ' ', '0', ' ', '0' }, ran[] = {
'0', '0', '0', '0' }, temp;

Random rand = new Random();

for (int i = 0; i < 4; i++) {

temp = chose.charAt(rand.nextInt(chose.length()));

display[i * 2] = temp;

ran[i] = temp;
}

String random = String.valueOf(display);

session.setAttribute("random", String.valueOf(ran));
%>
<%
Random jpgRand=new Random();
String jpg = "d:/test/background"+(jpgRand.nextInt(8)+1)+".jpg";
%>

<%
out.clear();
response.setContentType("image/jpeg");
response.addHeader("pragma", "NO-cache");
response.addHeader("Cache-Control", "no-cache");
response.addDateHeader("Expries", 0);
int width = 150, height = 50;
File _file = new File(jpg);
    Image src = ImageIO.read(_file);

BufferedImage image = new BufferedImage(width, height,
   BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//以下填充背景颜色
g.drawImage(src, 0, 0, width, height, null);
//设置字体颜色
g.setColor(Color.BLUE);
Font font = new Font("Times New Roman",Font.PLAIN,40);
g.setFont(font);
g.drawString(random,width-140,height-10);
for (int i=0;i<5;i++)
         {
    Color[] colors = {Color.BLACK,Color.BLUE,Color.CYAN,
        Color.GRAY,Color.GREEN,Color.MAGENTA,Color.ORANGE,Color.PINK,Color.RED,Color.YELLOW};
       int x = rand.nextInt(width);
       int y = rand.nextInt(height);
       int xl = rand.nextInt(100);
       int yl = rand.nextInt(50);
       g.setColor(colors[rand.nextInt(10)]);
       g.drawLine(x,y,x+xl,y+yl);
       g.drawOval(x,y,x+xl,y+yl);
       }

//g.drawLine(15,25,50,10);
g.dispose();
ServletOutputStream outStream = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outStream);
encoder.encode(image);
outStream.close();
%>

net.js:

/* namespacing object */
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;

net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,on_load,on_error,method,params,contentType){
this.req=null;
this.on_load=on_load;
this.on_error=(on_error) ? on_error : this.defaultError;
this.loadXMLDoc(url,method,params,contentType);
}
net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
if (!method)
{
method="GET";
}
if (!contentType && method=="POST")
{
contentType='application/x-www-form-urlencoded';
}
if (window.XMLHttpRequest)
{
this.req=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
   //add try catch;
   try {
      this.req = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e1){
     try {
      this.req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2){
    }
   }
     //
//this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req)
{
try
{
   var loader=this;
   this.req.onreadystatechange=function()
   {
net.ContentLoader.onReadyState.call(loader);
   }
   this.req.open(method,url,true);
   if (contentType)
   {
    this.req.setRequestHeader('Content-Type', contentType);
   }
   this.req.send(params);
}
catch (err)
{
   this.on_error.call(this);
}
}
}
net.ContentLoader.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
   this.on_load.call(this);
}else{
   this.on_error.call(this);
}
}
}
net.ContentLoader.prototype.defaultError=function(){
alert("error fetching data!"
+"/n/nreadyState:"+this.req.readyState
+"/nstatus: "+this.req.status
+"/nheaders: "+this.req.getAllResponseHeaders());
}