AJAX 核心原理與 XMLHttpRequest 完整實戰教學

技術組成

AJAX = Asynchronous JavaScript And XML，非新技術而是整合：

• JavaScript：發請求、處理響應、更新 DOM
• XMLHttpRequest：異步通訊核心物件
• XML/JSON：資料交換格式
• CSS：呈現樣式

XMLHttpRequest 核心 API

完整流程

1. 建立 XHR 物件（兼容 IE ActiveXObject）
2. open("POST", "login", true)
3. 設定回調：readyState===4 && status===200 處理 responseText
4. POST 需設 Header：Content-Type: application/x-www-form-urlencoded
5. send("username=...&password=...")

前端完整代碼

function createXHR() {
    if (window.XMLHttpRequest) return new XMLHttpRequest();
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) { return new ActiveXObject("Microsoft.XMLHTTP"); }
}
function chkUser() {
    var xhr = createXHR();
    var u = document.getElementById("username").value;
    var p = document.getElementById("password").value;
    xhr.open("POST", "login", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("res").innerHTML =
                xhr.responseText == '0' ? "登入成功" : "<font color='red'>登入失敗</font>";
        }
    };
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username=" + u + "&password=" + p);
}

後端 Servlet

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    String u = req.getParameter("username");
    String p = req.getParameter("password");
    User user = userService.login(new User(u, p));
    resp.getWriter().print(user != null ? 0 : 1);
}

關鍵點

• 異步不阻塞 UI，回調處理結果。
• POST 必須設 Content-Type，否則後端 getParameter 取不到值。
• 現代開發推薦 fetch API 或 Axios 封裝，但理解 XHR 為基礎。