JSP + AJAX GET 請求完整實作：用戶名即時驗證範例

傳統表單提交體驗差，AJAX 非同步驗證可即時回饋。本文完整示範：JSP 頁面表單、onblur 觸發 AJAX GET、原生 XMLHttpRequest 封裝、Servlet 後端驗證、回調處理顯示結果。

前端 JSP 頁面

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>註冊頁 - AJAX 驗證示範</title>
</head>
<body>
<form action="servlet/RegisterServlet" method="post">
    <table>
        <tr>
            <td>用戶帳號：</td>
            <td><input type="text" name="username" id="username" onblur="checkUser(this)" /></td>
        </tr>
        <tr>
            <td>用戶密碼：</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="註冊" /></td>
            <td><input type="reset" value="重置" /></td>
        </tr>
    </table>
</form>

<script>
// 建立 XMLHttpRequest（相容 IE6+）
function createXHR() {
    return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

// 失去焦點觸發驗證
function checkUser(input) {
    var username = input.value.trim();
    if (!username) {
        alert("用戶名不能為空！");
        input.focus();
        return;
    }

    var xhr = createXHR();
    var url = "servlet/RegisterServlet?username=" + encodeURIComponent(username);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = xhr.responseText.trim();
            if (result === "true") {
                alert("用戶名可用！");
            } else {
                alert("用戶名已存在！");
            }
        }
    };

    xhr.open("GET", url, true);
    xhr.send(null);
}
</script>
</body>
</html>

後端 Servlet

@WebServlet("/servlet/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        resp.setContentType("text/plain;charset=UTF-8");
        String username = req.getParameter("username");
        // 模擬資料庫查詢
        boolean exists = "admin".equals(username);  // 僅示範
        resp.getWriter().print(exists ? "false" : "true");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 實際註冊邏輯
    }
}

web.xml（Servlet 3.0+ 可用註解替代）

<servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.example.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/servlet/RegisterServlet</url-pattern>
</servlet-mapping>

關鍵細節

現代化改良建議

• 前端改用 fetch() 或 axios，Promise 化、程式碼更簡潔。
• 後端回傳 JSON：{"available": true, "message": ""}，擴充性更好。
• 加入防抖：setTimeout 延遲 300ms 發送，減少請求頻率。
• 顯示驗證狀態圖示（綠勾/紅叉）取代 alert，體驗更佳。

安全提醒

• 前端驗證只為體驗，後端必須再次驗證（防繞過）。
• 用戶名查詢介面建議加入速率限制，防止遍舉攻擊。
• 生產環境請使用 PreparedStatement 防 SQL 注入。