ajax怎麼實現驗證碼

這次帶給大家ajax怎麼實現驗證碼，ajax實現驗證碼的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文實例為大家分享了ajax實作驗證碼功能的具體程式碼，供大家參考，具體內容如下

首先建立一個驗證碼：

 
<!-- 以上导入awt和awt.image包 --> 
 
 

將驗證碼壓縮成圖片，在checkcode.jsp中引用,並在該頁面中利用ajax向伺服器發送資料

 
 
 
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
  
 <base>" rel="external nofollow" > 
  
 <title>验证码</title> 
  
 <meta> 
 <meta> 
 <meta>  
 <meta> 
 <meta> 
 <style> 
  table{ 
   margin: 100px auto; 
  } 
   
 </style> 
  
 
  
  

                                      

验证码

√√√

      <script> //去除空格 function trim(str){ //从左侧开始替换空格 str = str.replace(/^\s*/,""); //从左侧开始替换空格 str = str.replace(/\s$/,""); return str; } </script>     <script> //创建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> 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> 

然後編寫服務端,接收輸入的信息，判斷是否與驗證碼相互匹配,將對應的圖片的路徑以輸出流的方式輸出

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個數字的時候就會出現提示
運行結果:

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

實作無刷新下拉動連線的Ajax+Servlet（附程式碼）

ajax取得json數據為undefined應該如何使用

以上是ajax怎麼實現驗證碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！