IT兄弟連 JavaWeb教程 jQuery對AJAX的支援經典案例
案例需求：編寫使用者登陸頁面的驗證碼模組，在使用者進行登陸時，輸入驗證碼後不需要點選提交按鈕，使用AJAX非同步地向伺服器傳送驗證驗證碼的請求。如果驗證碼正確，可以點選提交按鈕，如果驗證碼輸入錯誤，提示使用者。如果使用者看不清驗證碼，點選驗證碼還可以刷新出新的驗證碼。
案例實現：
驗證碼原理：當頁面請求一個驗證碼的Servlet時，這個Servlet會把資料以圖片的形式傳給客戶端，並把資料以字串的形式存入了session中。當用戶以圖片為標準輸入對應的驗證碼併發送給對應的用來驗證驗證碼的Servlet時，驗證驗證碼的Servlet收到使用者輸入的資料，並從session取出對應的驗證碼字元進行驗證即可。
● 定義向客戶端傳送驗證碼的Servlet。詳細程式碼如下：
package com.xdl.servlet;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
@WebServlet("/checkCode")
public class CheckCode extends HttpServlet {
public void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("image/jpeg");
BufferedImage image = new BufferedImage
(60, 20, BufferedImage. TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random r = new Random();
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.fillRect(0, 0, 60, 20);
g.setColor(new Color(0,0,0));
String number = String.valueOf(r.nextInt(99999));
HttpSession session = request.getSession();
session.setAttribute("number", number);
g.drawString(number, 5, 15);
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.drawLine(r.nextInt(60), r.nextInt(20), r.nextInt(60), r.nextInt(20));
OutputStream os = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);
encoder.encode(image);
}
}
● 定義用來驗證驗證碼準確性的Servlet。詳細程式碼如下：
package com.xdl.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
@WebServlet("/validateCheckCode")
public class ValidateCheckCode extends HttpServlet {
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String code = request.getParameter("code");
String answer = (String)request.getSession().getAttribute("number");
Map<String,Object> info = new HashMap<>();
if(code.equals(answer)){
info.put("state", 1);
info.put("msg", "驗證碼正確");
}else{
info.put("state", 0);
info.put("msg", "驗證碼不正確");
}
String jsonStr = JSONObject.fromObject(info).toString();
PrintWriter pw = response.getWriter();
pw.write(jsonStr);
pw.close();
}
}
● 編寫客戶端頁面，包括使用者名稱輸入框、密碼輸入框、以及驗證碼輸入框和提交按鈕。詳細程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function validCode(){
$.ajax({
url:'validateCheckCode',
type:'post',
data:{code:$("#code").val()},
dataType:'json',
success:function(message){
if(message.state==1){
$("#loginBtn").removeAttr("disabled");
}else{
$("#loginBtn").attr('disabled','disabled');
}
$("#sp1").html(message.msg);
}
});
}
function changeCode(){
$("#imgcode").attr("src","checkCode.do?r="+Math.random());
$("#loginBtn").attr('disabled','disabled');
}
</script>
</head>
<body>
賬號:<input type="text" placeholder="請輸入賬號" name="account_no"> <br>
密碼:<input type="password" placeholder="請輸入密碼" name="account_password">
<br>
驗證碼:<input type="text" name="check_code" id="code" placeholder="請輸入驗證碼" onblur="validCode()" ><img src="checkCode.do" id="imgcode" onclick= "changeCode()"><br>
<span id="sp1"></span><br>
<input type="submit" id="loginBtn" value="登入" disabled="disabled">
</body>
</html>
目前全部的程式碼已經編寫完成，我們開啟Tomcat伺服器，在瀏覽器中輸入http://localhost:8080/checkcode/login.html。瀏覽器將出現如圖2所示的頁面。
此時是無法點選登陸按鈕的，因為我們的驗證碼沒有通過驗證，現在我們輸入正確的驗證碼，然後將滑鼠移出驗證碼輸入框。
圖2 login.html
圖3 輸入了正確的驗證碼
我們輸入了正確的驗證碼，並且伺服器也已經驗證通過了，現在我們就可以點選登陸按鈕了。
現在我們輸入錯誤的驗證碼來看看頁面上會出現什麼效果。
可以看到我們輸入了錯誤的驗證碼，伺服器檢查沒有通過，登陸按鈕還是不可點選的。
有時我們頁面上面的驗證碼不清晰，不能很好的辨認其中的字元，所以在我們的登陸頁面中，為驗證碼圖片添加了一個單擊事件，當點選驗證碼圖片時，頁面會使用Ajax重新向伺服器傳送新的請求來重新整理驗證碼。
圖4 輸入錯誤的驗證碼後，提示驗證碼
圖5 使用AJAX向服務端重新獲取驗證碼
不正確，並且登