您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

AJAX 校驗用戶名唯一性：原生 JS 典型拼寫錯誤排查與修復

編輯：程式設計綜合問答

問題現場

開發者在實現「用戶名即時檢測」功能時，發現輸入框失焦後，頁面提示區域始終不顯示「用戶名可用/重復」信息。控制台拋出錯誤：

ReferenceError: doucument is not defined

錯誤代碼片段

if (str == "OK") {
    document.getElementById("checkname").innerHTML = "用戶名可用";
} else {
    doucument.getElementById("checkname").innerHTML = "用戶名重復"; // 拼寫錯誤
}

根因分析

經典的 拼寫錯誤：`document` 被寫成 `doucument`（u、o 位置顛倒）。JavaScript 區分大小寫且不認識未聲明的標識符，直接拋出 `ReferenceError` 導致後續邏輯中斷。

修復方案

// 正確寫法
document.getElementById("checkname").innerHTML = "用戶名重復";

完善後的 AJAX 校驗流程

1. 前端 HTML

<input type="text" id="username" onblur="checkUsername()">
<span id="checkname"></span>

2. 原生 JS 封裝 XMLHttpRequest

function checkUsername() {
    var xhr = new XMLHttpRequest(); // 現代瀏覽器均支持
    var username = document.getElementById("username").value;
    xhr.open("GET", "CheckServlet?username=" + encodeURIComponent(username), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = xhr.responseText.trim();
            var el = document.getElementById("checkname");
            el.textContent = (result === "OK") ? "用戶名可用" : "用戶名重復";
            el.style.color = (result === "OK") ? "green" : "red";
        }
    };
    xhr.send();
}

3. Servlet 後端邏輯

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username = req.getParameter("username");
        // 模擬查庫，實際應用 PreparedStatement 查詢
        boolean exists = "admin".equals(username) || "test".equals(username);
        resp.setContentType("text/plain;charset=UTF-8");
        resp.getWriter().print(exists ? "NO" : "OK");
    }
}

避坑指南：原生 AJAX 常見低級錯誤

錯誤類型	典型表現	預防措施
對象名拼寫	`doucument`、`XMLHttpRequest` 大小寫	IDE 代碼提示、ESLint 靜態檢查
就緒狀態判斷	漏寫 `readyState === 4` 或 `status === 200`	封裝通用請求函數、使用 fetch/axios
編碼亂碼	中文參數傳遞錯亂	前端 `encodeURIComponent`、後端 `setCharacterEncoding("UTF-8")`
緩存干擾	GET 請求被瀏覽器緩存	URL 附加時間戳 `?_=` + Date.now()

現代化替代方案

新項目建議直接使用 Fetch API 或 Axios：

// Fetch 版本
fetch(`CheckServlet?username=${encodeURIComponent(username)}`)
    .then(r => r.text())
    .then(txt => {
        document.getElementById("checkname").textContent = txt === "OK" ? "可用" : "重復";
    });