使用ajax怎么實現一個驗證碼功能

本篇文章給大家分享的是有關使用ajax怎么實現一個驗證碼功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯建站主要從事成都做網站、成都網站制作、成都外貿網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務海興,10多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

首先創(chuàng)建一個驗證碼：

<%@ 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的形式通過字節(jié)流輸出 
  ImageIO.write(image, "jpeg", response.getOutputStream()); 
  //清除緩存 
  out.clear(); 
  //放入body中 
  out = pageContext.pushBody(); 
%>

將驗證碼壓縮成圖片，在checkcode.jsp中引用,并在該頁面中利用ajax向服務器發(fā)送數據

<%@ 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%>" rel="external nofollow" > 
  
 <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"> 
  //創(chuàng)建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(); 
    //準備發(fā)送異步請求 
    ajax.open(method, url); 
    //設置請求頭POST提交方式才需要 
    ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); 
    //拼接實體內容 
    var content = "checkcode=" + checkcode;     
    //發(fā)送請求 
    ajax.send(content); 
     
    //監(jiān)聽服務器狀態(tài)變化 
    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 { 
 @Override 
 protected 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個數字的時候就會出現提示
運行結果:

使用ajax怎么實現一個驗證碼功能

以上就是使用ajax怎么實現一個驗證碼功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯行業(yè)資訊頻道。

網頁名稱：使用ajax怎么實現一個驗證碼功能
分享路徑：http://bm7419.com/article20/goshjo.html

成都網站建設公司_創(chuàng)新互聯，為您提供域名注冊、網站建設、品牌網站建設、Google、關鍵詞優(yōu)化、外貿建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

商城網站建設