Ajax 入門示例：原生 XMLHttpRequest 實現用戶名驗證

場景

註冊頁面實時校驗用戶名是否已存在：輸入框失焦發起 Ajax GET 請求，Servlet 返回提示信息，前端顯示結果。

前端完整代碼 (JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax 用戶名驗證</title>
    <script>
        var xmlhttp;
        function verify() {
            var userName = document.getElementById("username").value;
            if (!userName) { alert("請輸入用戶名"); return; }

            // 1. 創建 XMLHttpRequest 對象（兼容 IE6+）
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType("text/xml");
            } else if (window.ActiveXObject) {
                var activeNames = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var i = 0; i < activeNames.length; i++) {
                    try { xmlhttp = new ActiveXObject(activeNames[i]); break; }
                    catch (e) { /* 忽略 */ }
                }
            }

            // 2. 註冊回調
            xmlhttp.onreadystatechange = callback;

            // 3. 發送請求（GET 攜帶參數）
            var url = "/AjaxTest/TelonVerify?username=" + encodeURIComponent(userName) + "&t=" + Date.now();
            xmlhttp.open("GET", url, true); // true = 異步
            xmlhttp.send(null);
        }

        function callback() {
            if (xmlhttp.readyState == 4) { // 完成
                if (xmlhttp.status == 200) { // HTTP 成功
                    var msg = xmlhttp.responseText;
                    document.getElementById("msg").innerHTML = msg;
                } else {
                    document.getElementById("msg").innerHTML = "請求失敗：" + xmlhttp.status;
                }
            }
        }
    </script>
</head>
<body>
    <h3>註冊頁面</h3>
    用戶名: <input type="text" id="username" onblur="verify()">
    <span id="msg" style="color:red"></span>
</body>
</html>

後端 Servlet (TelonVerify.java)

@WebServlet("/TelonVerify")
public class TelonVerify extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();

        String userName = req.getParameter("username");
        // 實際項目中查數據庫，此處模擬
        if ("123".equals(userName)) {
            out.print("用戶名 " + userName + " 已存在");
        } else {
            out.print("用戶名 " + userName + " 可註冊");
        }
    }
    @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

常見坑點與修正

現代寫法推薦：Fetch API / Axios

// Fetch (原生、Promise)
fetch(`/TelonVerify?username=${encodeURIComponent(name)}`)
  .then(r => r.text())
  .then(msg => document.getElementById('msg').textContent = msg);

// Axios (第三方、功能豐富)
axios.get('/TelonVerify', { params: { username: name } })
  .then(res => document.getElementById('msg').textContent = res.data);

總結

原生 XMLHttpRequest 理解 Ajax 底層機制，實際項目建議封裝或使用 fetch/axios。核心流程：**創建對象 → 註冊回調 → open/send → readyState=4 且 status=200 時處理響應**。