jQuery+Ajax+Servlet進行驗證碼校驗

本篇文章主要說的是驗證碼的校驗，使用到的有前臺jsp頁面+jQuery+Ajax+Servlet。

代碼中都有較詳細的註釋，這裏要交代的有兩點：

1、將Ajax改爲同步執行：
    Ajax代碼中如果沒有async:false,這一句，驗證功能也能實現，之所以加上這一句是登錄時的功能需要。當點擊“登錄”按鈕時，需判斷用戶名、密碼、驗證碼是否全部正確，而Ajax是異步執行的，點擊登錄時不能夠獲取到Ajax的返回值，所以調用checkCode()方法不能正確判斷驗證碼填寫是否正確。所以將Ajax改爲同步執行，可獲取到返回值。
2、驗證碼：

    驗證碼的標籤爲<img/>標籤，但是src的值爲"code"，其對應的是一個Servlet，該Servlet的作用就是生成一個驗證碼圖片。有興趣的可在另外一篇博客上看到。

    效果圖：

jsp頁面代碼：

<tr>
	<td>
		驗證碼：
	</td>
	<td>
		<!--驗證碼輸入框-->
		<input type="text" name="validate" size="5" class="text" onBlur="checkCode()"/>
		   
		<!--驗證碼圖片，用Image流動態輸出的-->
		<img class="code" alt="點擊刷新" src="code" onclick="this.src='code?s='+new Date().getTime();" >
	</td>
	<td>
		<!--驗證碼驗證信息-->
		<div id="checkCode" class="check">*</div>
	</td>
</tr>

jQuery+Ajax代碼：

/**
 * 檢查驗證碼
 */
function checkCode() {
	var check = false;
	$.ajax( {
		type : "post",//請求方式
		url : "checkCode",//發送請求地址
		async : false,
		dataType: "html",
		data : {//發送數據
			validate : $('[name=validate]').val()
		},
		//請求成功後的回調函數有兩個參數
		success : function(data,textStatus) {
			if(data=='0') {
				$("#checkCode").html("驗證碼錯誤！");
			} else {
				$("#checkCode").html("正確！");
				check = true;
			}
		}
	});
	return check;
}

Servlet代碼：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class CheckCodeServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		String code=request.getParameter("validate");
		PrintWriter out = response.getWriter();
		if (!code.equalsIgnoreCase(request.getSession().getAttribute("code").toString())) {
			out.print(0);
		} else {
			out.print(1);
		}
		out.flush();
		out.close();
	}

}

web.xml配置代碼：

  <servlet>
    <servlet-name>CheckCodeServlet</servlet-name>
    <servlet-class>servlet.CheckCodeServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>CheckCodeServlet</servlet-name>
    <url-pattern>/checkCode</url-pattern>
  </servlet-mapping>