Ajax 異步交互基礎：從 XMLHttpRequest 到 JSON、XStream 完整入門

Ajax 異步交互基礎：從 XMLHttpRequest 到 JSON、XStream 完整入門

1. 核心概念

• Ajax = Asynchronous JavaScript and XML
• 同步：發請求 → 等響應 → 再發下一個，頁面整體刷新，體驗「卡」
• 異步：發請求 → 立即繼續，JS 接收響應 → 局部刷新，體驗流暢

典型場景：百度搜索建議、用戶名註冊即時校驗。

2. 四步發送異步請求

// 1. 創建 XMLHttpRequest（兼容 IE5/6）
function createXHR() {
    try { return new XMLHttpRequest(); }
    catch(e) {
        try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e) {
            try { return new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(e) { alert("瀏覽器太舊"); throw e; }
        }
    }
}

var xhr = createXHR();

// 2. 打開連接
xhr.open("GET", "/servlet/ValidateUser?username=" + encodeURIComponent(val), true);

// 3. 發送請求
xhr.send(null);  // GET 必須傳 null

// 4. 註冊回調
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var result = xhr.responseText; // 或 responseXML
        // DOM 更新頁面
    }
};

readyState：0-未調用 open、1-已 open、2-已 send、3-響應中、4-完成
status：HTTP 狀態碼（200 成功、404 未找到、500 服務器錯誤）

3. POST 請求帶參數

xhr.open("POST", "/servlet/Login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("username=zhangSan&password=123");

4. 實戰案例：用戶名異步校驗

• 前端：輸入框 onblur 觸發 Ajax → ValidateUsernameServlet
• 後端：判斷用戶名是否為 itcast → 返回 1(已存在) 或 0(可用)
• 前端：收到 1 顯示「用戶名已被註冊」

5. XML 響應處理

• 服務端：response.setContentType("text/xml;charset=utf-8")
• 客戶端：var doc = xhr.responseXML 得到 Document 對象，用 DOM API 解析

6. 省市二級聯動（XML 版）

1. 頁面載入 → 請求 ProvinceServlet → 返回省份字符串 → 動態生成 <option>
2. 選擇省份 → 請求 CityServlet?province=... → 返回該省城市 XML → 解析填充城市下拉框

7. XStream：JavaBean ⇄ XML

依賴：xstream-1.4.7.jar + xpp3_min-1.1.4c.jar

XStream xs = new XStream();
xs.alias("china", List.class);
xs.alias("province", Province.class);
xs.useAttributeFor(Province.class, "name");      // name 作為屬性
xs.addImplicitCollection(Province.class, "cities"); // 隱式集合
xs.omitField(City.class, "description");         // 忽略字段
String xml = xs.toXML(provinceList);

8. JSON 與 json-lib

語法

var person = {"name":"zhangSan","age":18,"sex":"male","hobby":["read","swim"]};

• 對象 {}、數組 []、屬性名必須雙引號
• 值類型：null、數值、字符串、布爾、對象、數組

json-lib 核心

// Bean → JSON
JSONObject json = JSONObject.fromObject(person);
String jsonStr = json.toString();

// List → JSON
JSONArray arr = JSONArray.fromObject(list);
String arrStr = arr.toString();

JSON vs XML