基於 JSON 的進階 AJAX 開發：建立強大的客戶端-伺服器資料傳輸層

引言

AJAX 已成為 Web 互動的核心技術，但其結合 JSON（JavaScript Object Notation）與 JSON 解析器，能在客戶端與伺服器間建立複雜且高效的資料傳輸層。本文詳細示範如何建立 JavaScript 物件層次、序列化為 JSON 傳送、以及從伺服器反序列化還原物件。

前置準備

• 熟悉 JavaScript 物件導向特性
• 具備基本 AJAX 引擎開發經驗
• 下載 Douglas Crockford 的 JSON 解析器 (jsonparser.js)

建立 JavaScript 物件層次結構

示範三層物件結構：Auto (父) → Car (子) → Wheel (孫)。

// Auto.js
var Auto = new Object();

// Car.js
Auto.Car = new Object();
Auto.Car.color = "#fff";
Auto.Car.setColor = function(_color) { Auto.Car.color = _color; };
Auto.Car.setColor("#333");

// Wheel.js
Auto.Car.Wheel = new Object();
Auto.Car.Wheel.color = "#000";

此結構模擬傳統 OOP 的類別繼承，便於管理與擴展。

將物件序列化為 JSON

引入 jsonparser.js 後，呼叫 toJSONString() 方法：

<body onload="document.getElementById('body').innerHTML = 
    'Auto Object: ' + Auto.toJSONString();">

輸出範例：{"Car":{"color":"#333","Wheel":{"color":"#000"}}}。執行時期的屬性變更（如 setColor）會即時反映在序列化結果中。

從伺服器接收並反序列化 JSON

伺服器回傳靜態或動態產生的 JSON 字串。客戶端使用 AJAX 引擎 (AjaxUpdater) 發送請求，回呼函式中呼叫 parseJSON() 還原物件：

function displayResponse() {
    if (Ajax.checkReadyState('loading') == "OK") {
        var Auto = Ajax.request.responseText.parseJSON();
        document.getElementById("body").innerHTML += 
            "Car color: " + Auto.Car.color + 
            " Wheel color: " + Auto.Car.Wheel.color;
    }
}

還原後的 Auto 物件完整保留層次結構，可直接存取子物件屬性與方法。

核心優勢

• 無縫資料交換：雙向序列化/反序列化，無需手工解析 XML。
• 狀態保持：客戶端物件可基於 AJAX 保持自身狀態。
• 物件導向映射：伺服器端資料庫記錄直接映射為客戶端 JavaScript 物件圖。

結語

JSON + AJAX 打破了傳統 XML 傳輸的繁瑣，讓 Web 應用擁有類似富客戶端的資料模型操作能力，是構建現代化 RIA (Rich Internet Application) 的關鍵技術路徑。