Ajax+Struts2实现验证码验证功能实例代码

众所周知，验证码在我们的生活中都是非常常见的，很多公司都在各种折腾各种各样的验证码，这里简要的用一个小案例来实现验证码的功能（ps:其实我挺讨厌验证码这个东西的）。

今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。

这里命名为01_image.jsp，这类的主要功能就是生成验证码，里面是各种画线条，随机数字等，我这里设置的是5个数字的验证，如果你想要改成其他的也可以，大致思路就是在生成数字的那个循环那里加上字母就可以了。

<%@ 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;i<5;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;i<checknum.length();i++){
sb.append(checknum.charat(i)+" ");//"2 5 2 5"
}
g.drawstring(sb.tostring(),15,20);
session.setattribute("checknum",checknum);//2525
//通过字节输出流输出
imageio.write(image,"jpeg",response.getoutputstream());
out.clear();
out = pagecontext.pushbody();
%>

接下来把输入验证码的html页面写好，我这里是些在了一个jsp文件中的。命名为checkcode.jsp

<th>验证码:</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>

然后给这个文件添加javascript代码，这里使用的当然就是一个ajax啦，对于ajax的编码步骤之前已经写的很详细了，所以我们这里就直接使用了。 对于ajax.js写好后放到js目录下面，然后再找个checkcode.jsp中引入中国js文件 ajax.js的内容：

//创建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;
}

然后就是chenkcode中的js内容了

//去掉两边的空格
function trim(str){
str=str.replace(/^\s*/,"");//从左侧开始，把空格去掉
str=str.replace(/\s*$/,""); //从右侧开始，把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);
//设置ajax请求头为post，它会将请求的汉字自动进行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="";
}
}

然后开始写服务器端的代码，进行校验的话就需要这样的一个类了：

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;
//验证码检查
public class checkcodeaction extends actionsupport{
private string checkcode;
public void setcheckcode(string checkcode) {
this.checkcode = checkcode;
}
/**
* 验证
* @throws ioexception 
*/
public string check() throws ioexception {
//图片路径
string tip="images/a.jpg";
//从服务器获取session中的验证码
string checkcodeserver=(string) actioncontext.getcontext().getsession().get("checknum");
if(checkcode.equals(checkcodeserver)){
tip="images/b.jpg";
}
//以io流的方式将tip变量输出到ajax异步对象中
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文件中写入相应的方法。

<struts>
<package name="mypackage" extends="struts-default" namespace="/"> 
<action 
name="checkrequest" 
class="cn.tf.checkcode.checkcodeaction" 
method="check">
</action>
</package>
</struts>

运行结果如下：验证成功则返回绿色的小勾，错误则红色的叉。

以上所述是小编给大家介绍的ajax+struts2实现验证码验证功能实例代码，希望对大家有所帮助