Ajax實現登陸時的用戶名驗證（Servlet 響應）

登陸提交表單使用 POST 請求進行驗證及轉發；
輸入用戶名（是否正確）及密碼（是否爲空） 使用 GET 請求進行驗證；

1. 登陸界面及主頁

<!--login.jsp-->
<form action="login" method="POST">
    <div>
        <input type="text" name="username" id="userId" placeholder="用戶名">
        <span class="info"></span>
    </div>
    <div>
        <input type="password" name="password" id="passwd" placeholder="密碼">
    </div>
    <input type="submit" value="登 錄" >
    ${error}
</form>

<!--index.jsp-->
<h3 style='color:#00f'>親愛的${user.name}，歡迎您！</h3>
<p>如今的時間是：<% out.println(new java.util.Date()); %></p>

2. Ajax 引擎請求服務器及接受響應

//javascript
var xmlHttp;
var userId = document.getElementById("userId");
var passwd = document.getElementById("passwd");
var info = document.getElementsByClassName("info");
userId.onblur = checkUser;
passwd.onblur = checkPwd;

function createXMLHttpRequest() {
    //檢查是否支持 ActiveXObject 控件（IE瀏覽器）
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
    }
}

function checkUser() {
    createXMLHttpRequest();
    var url = "login?username="+userId.value;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            info[0].innerHTML = xmlHttp.responseText;
        }
    };
}
function checkPwd() {
    createXMLHttpRequest();
    var url = "login?password="+passwd.value;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            info[1].innerHTML = xmlHttp.responseText;
        }
    };
}

3. Servlet 對請求做出響應

當 username 爲空時，按 tab 鍵使用戶名輸入框失去焦點，此時觸發GET請求，url 後綴爲： ?username=，
即：username=="", password==null

當 username 不爲空，按 tab 鍵使用戶名輸入框失去焦點，並觸發GET請求，url 後綴爲： ?username=xxx，
即：username=="xxx", password==null

若再按 tab 鍵使密碼輸入框又失去焦點，這時繼續GET請求，url 後綴爲： ?password=，
即：username==null, password==""

//LoginServlet.java
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    ......
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter(); 
        // username、password 可能爲null, 可能不爲null
        if(request.getParameter("username") == "") {  
            //?username=
            if(request.getParameter("password") == null) {
                out.print("用戶名不能爲空！");
            } 
        } else if(request.getParameter("username") == null) { 
            if(request.getParameter("password") == ""){
                //?password=
                out.print("密碼不能爲空！");   
            }   
        } else { 
            //?username=xxx
            String name = request.getParameter("username");     
            if(!name.equals("admin")) {
                if(request.getParameter("password") == null) {
                    out.print("用戶名不存在！");   
                }           
            }
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter(); 

        String name = request.getParameter("username");
        String pwd = request.getParameter("password");

        if(name.equals("admin") && pwd.equals("admin")) {
            User user = new User(name,pwd);
            HttpSession session = request.getSession();
            session.setAttribute("user", user);     
            RequestDispatcher rd = request.getRequestDispatcher("/");
            rd.forward(request, response);
        } else {
            request.setAttribute("error", "用戶名或密碼錯誤，請從新登陸！");
            RequestDispatcher rd = request.getRequestDispatcher("login.jsp");
            rd.forward(request, response);      
        }
    }
}

---

待續 …