PHP Ajax 入門實戰：HelloWorld 級異步交互完整範例

Ajax（Asynchronous JavaScript and XML）讓網頁無需重新整理即可與伺服器交換資料。本文從核心概念到完整前後端代碼，帶你打造第一個即時郵遞區號查詢應用。

核心概念速覽

• 同步 vs 非同步：傳統表單提交會阻塞頁面；Ajax 在背景發送請求，使用者可繼續操作
• 核心物件：XMLHttpRequest 負責攔截請求、發送、監聽回應
• 流程六步驟：建立物件 → 組裝 URL → 開啟連線 → 設定回呼 → 發送請求 → 處理回應

前端實作（index.html）

<script>
var xmlHttp = false;
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}

function callServer() {
    var city = document.getElementById("city").value;
    if (city == null || city == "") return;
    
    var url = "/testAjax/getZipcode.php?city=" + escape(city);
    xmlHttp.open("GET", url, true);  // true = 非同步
    xmlHttp.onreadystatechange = updatePage;
    xmlHttp.send(null);
}

function updatePage() {
    if (xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;
        document.getElementById("zipcode").value = response;
    }
}
</script>

<form>
    <p>City: <input type="text" name="city" id="city" size="25" onchange="callServer();"></p>
    <p>Zip Code: <input type="text" name="zipcode" id="zipcode" size="5"></p>
</form>

後端實作（getZipcode.php）

<?php
if (!isset($_GET["city"])) {
    echo "URL:city parameter is set?";
} else {
    $city = $_GET["city"];
    if ($city != null && $city != "") {
        echo $city . "_010";  // 模擬回傳郵遞區號
    } else {
        echo "city is null?";
    }
}
?>

運作效果

使用者在 City 欄位輸入城市名並切換焦點，Zip Code 欄位即時顯示「城市名_010」，無頁面重整。

現代化開發建議

• 使用 fetch API 或 Axios 取代原生 XHR，語法更簡潔
• 後端回傳 JSON 格式，前端 JSON.parse() 解析，擴展性更強
• 加入錯誤處理（onerror、HTTP 狀態碼檢查）
• 考慮 CSRF 保護與輸入驗證