2005：Ajax 革命#

事件#

2005年2月，Jesse James Garrett 發表文章 《Ajax: A New Approach to Web Applications》，命名了 Ajax（Asynchronous JavaScript and XML） 技術組合。同年 Google 發佈 Gmail（2004）、Google Maps（2005）與 Google Suggest，證明「Web 應用程式」可以像桌面軟體一樣流暢。

為何重要#

JavaScript 的命運轉折點：從「表單驗證的玩具腳本」躍升為「應用程式語言」。Gmail、Google Maps 用事實證明：整個應用程式可以跑在瀏覽器裡、不換頁。
技術組合普及：XMLHttpRequest（IE 1999首創，見 1999-XMLHttpRequest問世）+ DOM 動態更新 + JavaScript，各元件早已存在，Garrett 的貢獻是命名與整理範式。
催生現代生態：jQuery（2006，解決跨瀏覽器地獄）、Prototype、Dojo 等函式庫爆發；SPA（單頁應用）概念萌芽，直通 React（2013）時代。
語言復興的起點：Ajax 讓開發者與企業重新投資 JavaScript，直接為 ES5（2009）、Node.js（2009）、ES6（2015）的到來鋪路。

理論與實用原因#

理論原因：突破「Web = 超文件」的模型，實踐「Web = 應用程式平台」——狀態留在客戶端，資料非同步往返。
實用原因：Google 的搜尋與郵件服務需要桌面級體驗；頻寬成本讓「整頁重載」的伺服器渲染變得不經濟，局部更新是省頻寬的最佳解。

彌補了什麼缺陷#

彌補了 Web「互動延遲高、無法構建複雜應用、伺服器往返成本高」的缺陷。它也凸顯了 IE 專屬 API 的碎片化問題（XHR 要寫 ActiveX 分支），這正是 jQuery（2006）「寫得少、做得多的相容層」得以成功的市場缺口。

程式範例#

1. Ajax 經典模式：不換頁取得資料並局部更新#

// 2005年的標準 Ajax 寫法（XHR 早已存在，Garrett 命名了這個範式）
function loadUsers() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/users", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
      var users = JSON.parse(xhr.responseText);
      var html = "";
      for (var i = 0; i < users.length; i++) {
        html += "<li>" + users[i].name + "</li>";   // 字串拼接生成 HTML
      }
      document.getElementById("list").innerHTML = html;  // 局部更新
    }
  };
  xhr.send();
}

2. 同樣功能的 jQuery 版（2006，把跨瀏覽器分支藏起來）#

// jQuery：寫得少、做得多
$("#list").load("/api/users");                 // 一行：取回並插入
$.getJSON("/api/users", function (users) {
  $.each(users, function (i, u) { /* ... */ });
});

3. 缺陷的顯形：字串拼接與 innerHTML 的問題#

// XSS 風險 + 狀態失同步——命令式 DOM 操作的噩夢
document.getElementById("list").innerHTML = html;  // 若 html 含 <script> = XSS
// 這些缺陷直通 React（2013）的解方：宣告式 UI + 虛擬 DOM