JavaScript GetXmlHttpObject() 詳解：AJAX 核心對象創建與封裝

代碼含義

var xmlHttp;                    // 1. 聲明變量
xmlHttp = GetXmlHttpObject();   // 2. 調用函數獲取 XMLHttpRequest 實例

GetXmlHttpObject() 典型實現

function GetXmlHttpObject() {
    var xmlHttp = null;
    // 現代瀏覽器 (IE7+, Firefox, Chrome, Safari, Opera)
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    // 古老 IE (IE5/IE6) 使用 ActiveXObject
    else if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    return xmlHttp;
}

核心知識點

1. XMLHttpRequest 是 AJAX 的基石

• 負責**瀏覽器與服務器異步通信**
• 支持 GET/POST/PUT/DELETE 等 HTTP 方法
• 可設置請求頭、處理響應、監聽狀態變化

2. 變量命名：xmlHttp 只是慣例

var ajax = GetXmlHttpObject();   // 同樣合法
var xhr = GetXmlHttpObject();    // 現代常用簡寫 (XMLHttpRequest)
var request = GetXmlHttpObject(); // 任意合法標識符

xmlHttp 無特殊含義，只是「XML + HTTP」的縮寫慣例命名。

3. 現代最佳實踐：直接使用原生構造函數

// 不需要封裝函數，現代瀏覽器通用
const xhr = new XMLHttpRequest();

// 或使用 Fetch API（更現代、基於 Promise）
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

完整 AJAX 流程示例

function sendRequest(url, callback) {
    const xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 請求完成
            if (xhr.status === 200) { // HTTP 成功
                callback(null, xhr.responseText);
            } else {
                callback(new Error('HTTP ' + xhr.status));
            }
        }
    };
    
    xhr.open('GET', url, true); // 異步
    xhr.send();
}

// 使用
sendRequest('/api/users', function(err, data) {
    if (err) return console.error(err);
    console.log(JSON.parse(data));
});

總結

• GetXmlHttpObject() 是**兼容舊版 IE 的工廠函數**，返回 XMLHttpRequest 實例
• 現代開發**直接用 new XMLHttpRequest()** 或 fetch()
• 變量名 xmlHttp 無特殊語義，可隨意命名
• 核心是掌握 readyState/status/onreadystatechange 異步回調模式