Ajax+Struts 2 인증 코드 인증 기능 인 스 턴 스 코드 구현

알다 시 피 인증 코드 는 우리 생활 에서 매우 흔히 볼 수 있 는 것 이다.많은 회사 들 이 각종 인증 코드 를 괴 롭 히 고 있다.여기 서 간단하게 작은 사례 로 인증 코드 의 기능 을 실현 한다(ps:사실 나 는 인증 코드 라 는 것 을 매우 싫어한다).
오늘 공 유 된 것 은 ajax 를 통 해 동적 인증 코드 입력 이 올 바른 지 여부 입 니 다.우리 가 사용 하 는 것 은 ajax+struts 2 가 만 든 이 검증 입 니 다.우 리 는 웹 프로젝트 를 새로 만 들 었 다.그리고 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+Struts 2 인증 코드 검증 기능 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!