眾所周知，驗(yàn)證碼在我們的生活中都是非常常見(jiàn)的，很多公司都在各種折騰各種各樣的驗(yàn)證碼，這里簡(jiǎn)要的用一個(gè)小案例來(lái)實(shí)現(xiàn)驗(yàn)證碼的功能（ps:其實(shí)我挺討厭驗(yàn)證碼這個(gè)東西的）。
今天分享的是通過(guò)ajax來(lái)動(dòng)態(tài)的驗(yàn)證驗(yàn)證碼輸入是否正確。我們這里采用的是ajax+struts2來(lái)做的這個(gè)驗(yàn)證。 我們新建一個(gè)web工程。然后需要導(dǎo)入struts的相應(yīng)包。之后我們需要寫(xiě)一個(gè)類(lèi)來(lái)生成驗(yàn)證碼。
這里命名為01_image.jsp，這類(lèi)的主要功能就是生成驗(yàn)證碼，里面是各種畫(huà)線(xiàn)條，隨機(jī)數(shù)字等，我這里設(shè)置的是5個(gè)數(shù)字的驗(yàn)證，如果你想要改成其他的也可以，大致思路就是在生成數(shù)字的那個(gè)循環(huán)那里加上字母就可以了。
%@ 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);//0-255
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r,g,b);
}
public String getNum(){
String str = "";
Random random = new Random();
for(int i=0;i5;i++){
str += random.nextInt(10);//0-9
}
return str;
}
%>
%
response.setHeader("pragma", "no-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 50; i++) {
Random random = new Random();
int x = random.nextInt(80);
int y = random.nextInt(30);
int xl = random.nextInt(x+10);
int yl = random.nextInt(y+10);
g.setColor(getColor());
g.drawLine(x, y, x + xl, y + yl);
}
g.setFont(new Font("serif", Font.BOLD,16));
g.setColor(Color.BLACK);
String checkNum = getNum();//"2525"
StringBuffer sb = new StringBuffer();
for(int i=0;icheckNum.length();i++){
sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
}
g.drawString(sb.toString(),15,20);
session.setAttribute("CHECKNUM",checkNum);//2525
//通過(guò)字節(jié)輸出流輸出
ImageIO.write(image,"jpeg",response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>
接下來(lái)把輸入驗(yàn)證碼的html頁(yè)面寫(xiě)好，我這里是些在了一個(gè)jsp文件中的。命名為checkcode.jsp
th>驗(yàn)證碼:/th>
td>input type="text" name="checkcode" id="checkcodeID" maxlength="5" />/td>
td>img src="01_image.jsp" id="imgID" />/td>
td id="resID">/td>
/tr>
/table>
/form>
然后給這個(gè)文件添加javascript代碼，這里使用的當(dāng)然就是一個(gè)ajax啦，對(duì)于ajax的編碼步驟之前已經(jīng)寫(xiě)的很詳細(xì)了，所以我們這里就直接使用了。 對(duì)于ajax.js寫(xiě)好后放到j(luò)s目錄下面，然后再找個(gè)checkcode.jsp中引入中國(guó)js文件 ajax.js的內(nèi)容：
//創(chuàng)建AJAX異步對(duì)象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的瀏覽器不支持ajax，請(qǐng)更換瀏覽器");
}
}
return ajax;
}
然后就是chenkcode中的js內(nèi)容了
//去掉兩邊的空格
function trim(str){
str=str.replace(/^\s*/,"");//從左側(cè)開(kāi)始，把空格去掉
str=str.replace(/\s*$/,""); //從右側(cè)開(kāi)始，把K歌都去掉
return str;
}
document.getElementById("checkcodeID").onkeyup=function(){
var checkcode=this.value;
checkcode=trim(checkcode);
if(checkcode.length==5){
var ajax=createAJAX();
var method="POST";
var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
ajax.open(method,url);
//設(shè)置ajax請(qǐng)求頭為post，它會(huì)將請(qǐng)求的漢字自動(dòng)進(jìn)行utf-8的編碼
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("resID");
td.innerHTML="";
td.appendChild(img);
}
}
}
}else{
var td=document.getElementById("resID");
td.innerHTML="";
}
}
然后開(kāi)始寫(xiě)服務(wù)器端的代碼，進(jìn)行校驗(yàn)的話(huà)就需要這樣的一個(gè)類(lèi)了：
package cn.tf.checkcode;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
//驗(yàn)證碼檢查
public class CheckcodeAction extends ActionSupport{
private String checkcode;
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}
/**
* 驗(yàn)證
* @throws IOException
*/
public String check() throws IOException {
//圖片路徑
String tip="images/a.jpg";
//從服務(wù)器獲取session中的驗(yàn)證碼
String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM");
if(checkcode.equals(checkcodeServer)){
tip="images/b.jpg";
}
//以IO流的方式將tip變量輸出到ajax異步對(duì)象中
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw=response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
return null;
}
}
最后在struts.xml文件中寫(xiě)入相應(yīng)的方法。
struts>
package name="myPackage" extends="struts-default" namespace="/">
action
name="checkRequest"
class="cn.tf.checkcode.CheckcodeAction"
method="check">
/action>
/package>
/struts>
運(yùn)行結(jié)果如下：驗(yàn)證成功則返回綠色的小勾，錯(cuò)誤則紅色的叉。
以上所述是小編給大家介紹的Ajax+Struts2實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- ajax+json+Struts2實(shí)現(xiàn)list傳遞實(shí)例講解
- struts2+jquery實(shí)現(xiàn)ajax登陸實(shí)例詳解
- 通過(guò)Ajax兩種方式講解Struts2接收數(shù)組表單的方法
- ajax struts2 下拉框賦值(適合所有)
- ajax交互Struts2的action(客戶(hù)端/服務(wù)器端)
- 使用struts2+Ajax+jquery驗(yàn)證用戶(hù)名是否已被注冊(cè)
- Struts2和Ajax數(shù)據(jù)交互示例詳解
