Ajax + PHP 入門實戰：從 XMLHttpRequest 創建到跨瀏覽器兼容封裝與簡單應用示例

Ajax（Asynchronous JavaScript and XML）讓網頁無需刷新即可與服務器交互。核心對象是 XMLHttpRequest（XHR），現代瀏覽器均支援，IE5/6 需用 ActiveXObject。本文從底層創建、核心方法、封裝函數到完整 PHP 交互示例，手把手帶你入門。

一、創建 XHR 對象（跨瀏覽器兼容）

function createXHR() {
    if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Safari, Opera
        return new XMLHttpRequest();
    }
    // IE5/6
    try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) {}
    try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {}
    throw new Error('XMLHttpRequest not supported');
}

二、XHR 核心屬性與方法

三、通用 Ajax 封裝函數 (ES5 風格)

function ajax(options) {
    var xhr = createXHR();
    var method = (options.method || 'GET').toUpperCase();
    var url = options.url;
    var data = options.data || null;
    var async = options.async !== false;

    if (method === 'GET' && data) {
        url += (url.indexOf('?') === -1 ? '?' : '&') + serialize(data);
        data = null;
    }

    xhr.open(method, url, async);
    if (method === 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    if (options.headers) {
        for (var k in options.headers) xhr.setRequestHeader(k, options.headers[k]);
    }

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                var resp = options.dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText;
                options.success && options.success(resp, xhr);
            } else {
                options.error && options.error(xhr.status, xhr);
            }
        }
    };
    xhr.send(serialize(data));
    return xhr;
}

function serialize(obj) {
    if (!obj) return '';
    var arr = [];
    for (var k in obj) arr.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]));
    return arr.join('&');
}

四、完整示例：前端 test.html + 後端 do.php

<!-- test.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax Demo</title></head><body>
<button onclick="loadUser(1)">載入用戶 1</button>
<button onclick="loadUser(2)">載入用戶 2</button>
<div id="result"></div>
<script>
function loadUser(id) {
    ajax({
        url: 'do.php',
        method: 'GET',
        data: { id: id },
        dataType: 'json',
        success: function(res) {
            document.getElementById('result').innerHTML = 
                '<pre>' + JSON.stringify(res, null, 2) + '</pre>';
        },
        error: function(status) { alert('請求失敗: ' + status); }
    });
}
</script>
</body></html>

<?php
// do.php
header('Content-Type: application/json; charset=utf-8');
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$users = [
    1 => ['name' => '張三', 'email' => 'zhang@example.com', 'role' => 'admin'],
    2 => ['name' => '李四', 'email' => 'li@example.com', 'role' => 'user'],
];
echo json_encode($users[$id] ?? ['error' => '用戶不存在']);

五、進階話題

1. FormData 上傳文件：var fd = new FormData(formEl); xhr.send(fd);（不手動設置 Content-Type，瀏覽器自動帶 boundary）。
2. JSON 請求體：xhr.setRequestHeader('Content-Type','application/json'); xhr.send(JSON.stringify(obj))，PHP 端用 file_get_contents('php://input') 讀取。
3. 超時處理：xhr.timeout = 5000; xhr.ontimeout = fn（IE10+）。
4. 取消請求：xhr.abort()。
5. 現代替代：fetch() + async/await、Axios、Ky 等庫，提供 Promise 鏈、攔截器、自動轉 JSON。

六、安全與最佳實踐

• 所有輸出 json_encode + header('Content-Type: application/json')。
• 輸入驗證：filter_input、類型轉換、白名單。
• CSRF 保護：關鍵操作帶 Token 驗證。
• 錯誤統一格式：{code: 400, message: '...', data: null}。
• 避免在循環中創建 XHR，復用或使用併發控制。

掌握原生 XHR 能讓你理解 Ajax 底層機制，排查庫無法解決的疑難雜症；實際項目建議直接使用 fetch 或成熟庫提升開發效率。