JavaScript 創建 XMLHttpRequest 對象的跨瀏覽器兼容寫法

XMLHttpRequest 對象創建：從 IE5/6 到現代瀏覽器的完美兼容方案

AJAX 的核心是 XMLHttpRequest 對象，但不同瀏覽器（特別是舊版 IE）的創建方式差異巨大。本文介紹兩種經典的跨瀏覽器兼容寫法，雖然現代開發多使用 fetch 或庫封裝，但理解底層實現對排查兼容性問題仍有價值。

方法一：漸進式嘗試（推薦，最健壯）

通過 try-catch 依次嘗試不同的 ActiveXObject 版本，最後回退到標準構造函數：

<script>
// 創建一個布爾型變量標記是否成功
var xmlhttp = false;

// 1. 嘗試較新的 MSXML2.XMLHTTP (IE7+、裝了 MSXML 3.0+ 的 IE5/6)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    // alert("You are using Microsoft Internet Explorer."); // 調試用
} catch (e) {
    // 2. 失敗則嘗試舊版 Microsoft.XMLHTTP (IE5/6 默認)
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        // alert("You are using Microsoft Internet Explorer.");
    } catch (e) {
        // 3. 都失敗，標記為 false，嘗試標準方式
        xmlhttp = false;
    }
}

// 4. 非 IE 瀏覽器或 IE7+ 原生支持
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
    // alert("You are not using Microsoft Internet Explorer.");
}

// 現在 xmlhttp 可用於發送 AJAX 請求
console.log(xmlhttp);
</script>

優點：精確捕獲異常，優先使用較新版本 ActiveX，邏輯清晰健壯。

方法二：特性檢測簡化版（較簡潔但有缺陷）

<script>
var xmlhttp;

// 注意：這裡邏輯有誤，!window.ActiveXObject 在 IE 中為 false
// 正確寫法應判斷 window.ActiveXObject 是否存在
if (window.ActiveXObject) {
    // IE 瀏覽器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    // 非 IE 瀏覽器
    xmlhttp = new XMLHttpRequest();
}
</script>

注意：原文代碼中 (!window.ActiveXObject) 邏輯反了，IE 中 window.ActiveXObject 為真值，非 IE 為 undefined。正確判斷應為 if (window.ActiveXObject)。且此法不區分 ActiveX 版本，可能使用舊版組件。

現代最佳實踐（2020+）

現代瀏覽器（IE10+、Edge、Chrome、Firefox、Safari 等）均原生支持標準構造函數：

const xhr = new XMLHttpRequest();

如需兼容 IE9 及以下，可使用 Polyfill 或直接引入成熟庫（如 Axios、jQuery.ajax）。新項目建議直接使用 fetch API：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

總結

• 維護舊項目：使用方法一的漸進式嘗試，確保 IE5/6 兼容
• 新項目開發：直接使用 fetch 或成熟 HTTP 庫
• 理解原理：掌握 ActiveXObject 版本差異，幫助排查歷史兼容性 Bug

隨著 IE 退出歷史舞台，手寫 XMLHttpRequest 創建邏輯的場景已極少，但作為前端基礎知識，了解其演進歷程依然有價值。