Web 2.0 核心技術 AJAX 深度探討：從原理到雙實戰驗證通行證帳號

AJAX 技術棧與工作原理

AJAX（Asynchronous JavaScript and XML）非新語言，而是五大技術協奏：

1. XHTML + CSS 標準化呈現
2. DOM 動態顯示與交互
3. XML + XSLT 資料交換處理
4. XMLHttpRequest 非同步資料讀取
5. JavaScript 綁定並處理一切

本質：在用戶與伺服器間加入中介層，將同步交互轉為非同步，把部分伺服器負擔轉移客戶端，利用閒置算力，降低頻寬與主機成本。

跨瀏覽器 XMLHttpRequest 建立

function createXMLHttpRequest() {
    var req = false;
    try {
        if (window.ActiveXObject) { // IE
            for (var i = 5; i; i--) {
                try {
                    if (i == 2) req = new ActiveXObject("Microsoft.XMLHTTP");
                    else req = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
                    req.setRequestHeader("Content-Type", "text/xml;charset=gb2312");
                    break;
                } catch(e) { req = false; }
            }
        } else if (window.XMLHttpRequest) { // 標準瀏覽器
            req = new XMLHttpRequest();
            if (req.overrideMimeType) req.overrideMimeType('text/xml');
        }
    } catch(e) { req = false; }
    return req;
}

請求發送與回調處理流程

1. req.open('GET', url, true)：第三參數 true 表示非同步（AJAX 的「A」）。
2. req.onreadystatechange = callback：註冊狀態變更回調。
3. req.send(null)：發送請求，控制權立即歸還瀏覽器。
4. 回調中判斷 readyState == 4（完成）且 status == 200（HTTP OK），方可處理回應。

兩種回應處理模式實戰

案例一：文本字串回應 — 驗證網易通行證帳號

• 目標 URL：reg.163.com/register/checkssn.jsp?username=xxx
• 回應純文本，含「該用戶名已存在」等字樣。
• 客戶端用 req.responseText 取得字串，寫入頁面 div#message。

案例二：XML Document 回應 — 驗證金山通行證帳號

• 目標 URL：pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=xxx
• 回應 XML：<isExistedUid><result>-2</result></isExistedUid>（-2 未註冊，-1 已註冊）
• 客戶端用 req.responseXML 解析 DOM：

var response = req.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;
if (result == -2) msg = "用戶名 " + username + " 尚未註冊";
else if (result == -1) msg = "對不起，用戶名 " + username + " 已經註冊";
document.getElementById('message').innerHTML = msg;

關鍵技術細節

伺服端實現提示

演示使用現成門戶端點，實際專案需自建後端：

• Servlet/Controller 接收參數，查詢資料庫/快取
• 序列化為 XML（或 JSON，現代更主流）
• 設定正確 Header，輸出回應

結語

AJAX 客戶端基礎應用並不神秘，核心在於 XMLHttpRequest 生命週期掌控與回應解析。結合 CSS 動畫、JS 模板引擎、現代框架，可構建極致流暢的交互體驗。拋磚引玉，期待讀者融會貫通，創造屬於自己的 Web 2.0 應用。