PHP 結合 AJAX 實現無刷新交互完整指南（GET/POST/偽 AJAX）

AJAX 核心原理

AJAX（Asynchronous JavaScript and XML）通過 XMLHttpRequest 對象在後台與服務器交換數據，實現頁面局部更新而無需整頁刷新。核心流程：創建 XHR → 註冊回調 → 發送異步請求 → 處理響應更新 DOM。

通用 XHR 初始化函數（兼容 IE6+、現代瀏覽器）

function InitAjax() {
    var ajax = false;
    try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) {
        try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (E) { ajax = false; }
    }
    if (!ajax && typeof XMLHttpRequest != 'undefined') {
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

場景一：GET 請求獲取內容

點擊鏈接無刷新加載新聞詳情到指定 <div>。

// HTML
<a href="#" onClick="getNews(1)">新聞 1</a>
<div id="show_news"></div>

// JS
function getNews(newsID) {
    if (typeof(newsID) == 'undefined') return false;
    var url = "/show.php?id=" + newsID;
    var show = document.getElementById("show_news");
    var ajax = InitAjax();
    ajax.open("GET", url, true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            show.innerHTML = ajax.responseText;
        }
    };
    ajax.send(null);
}

場景二：POST 請求提交表單

無刷新保存用戶信息並顯示結果。

// HTML 表單（無 action/method）
<form name="user_info">
    姓名：<input type="text" name="user_name"><br>
    年齡：<input type="text" name="user_age"><br>
    性別：<input type="text" name="user_sex"><br>
    <input type="button" value="提交" onClick="saveUserInfo()">
</form>
<div id="msg"></div>

// JS
function saveUserInfo() {
    var msg = document.getElementById("msg");
    var f = document.user_info;
    var postStr = "user_name=" + f.user_name.value +
                  "&user_age=" + f.user_age.value +
                  "&user_sex=" + f.user_sex.value;
    var ajax = InitAjax();
    ajax.open("POST", "/save_info.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send(postStr);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            msg.innerHTML = ajax.responseText;
        }
    };
}

場景三：偽 AJAX（iframe 回調）用於文件上傳

早期 XMLHttpRequest 不支持文件上傳，利用隱藏 iframe 作為表單 target，服務端返回 JS 腳本調用父頁面回調函數。

// upload.html
<form action="/upload.php" method="post" enctype="multipart/form-data" target="iframe1">
    <input type="file" name="image"><br>
    <input type="submit" value="上傳">
</form>
<div id="message" style="display:none"></div>
<iframe name="iframe1" width="0" height="0"></iframe>

// upload.php (處理上傳並輸出模板)
<?php
// ... 處理上傳邏輯，生成 $upload_msg ...
$smarty->assign("upload_msg", $upload_msg);
$smarty->display("upload.tpl");
?>

// upload.tpl (Smarty 模板)
{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if}

// 父頁面 JS 回調函數
function callbackMessage(msg) {
    var el = parent.document.getElementById("message");
    el.style.display = "block";
    el.innerHTML = msg;
    setTimeout("parent.document.getElementById('message').style.display='none'", 3000);
}

現代替代方案

• 現代瀏覽器請使用 fetch API 或 axios，代碼更簡潔，支持 Promise/async-await。
• 文件上傳直接用 FormData + fetch，無需 iframe 技巧。
• 服務端建議返回 JSON 格式，前端統一解析渲染。