一、AJAX 簡介
AJAX（Asynchronous JavaScript and XML）是一種在無需重新加載整個網頁的情況下，能夠與服務器交換數據并更新部分網頁內容的技術。它不是一種新語言，而是使用現有的標準組合：JavaScript + XMLHttpRequest（或 Fetch）+ HTML + CSS。
二、AJAX 是否需要安裝？
不需要單獨安裝！
AJAX 是瀏覽器原生支持的技術，主流瀏覽器均內置 XMLHttpRequest 和 Fetch API，開發者可以直接使用。
三、使用方式
3.1 使用 XMLHttpRequest（傳統方式）
<button onclick="loadData()">加載數據</button>
<div id="result"></div><script>function loadData() {var xhr = new XMLHttpRequest();xhr.open("GET", "data.json", true);xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById("result").innerHTML = xhr.responseText;}};xhr.send();}
</script>
3.2 使用 Fetch API（現代方式）
<button onclick="loadData()">加載數據</button>
<div id="result"></div><script>function loadData() {fetch('data.json').then(response => response.json()).then(data => {document.getElementById('result').innerHTML = JSON.stringify(data);}).catch(error => console.error('請求失敗', error));}
</script>
3.3 使用 jQuery 的 $.ajax（簡化方式）
需引入 jQuery 庫：
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
使用示例：
<script>$.ajax({url: "data.json",method: "GET",success: function(data) {console.log("響應數據：", data);},error: function() {alert("請求失敗");}});
</script>
四、AJAX 請求類型
| 類型 | 描述 |
|---|---|
| GET | 請求數據 |
| POST | 提交數據 |
| PUT | 更新數據（REST） |
| DELETE | 刪除數據（REST） |
示例 POST 請求：
fetch("/api/login", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({ username: "user", password: "pass" })
}).then(res => res.json()).then(data => console.log(data));
五、常見用途
- 表單提交
- 動態加載分頁數據
- 自動補全輸入
- 無刷新評論系統
- 動態刷新內容區域（如天氣、新聞）
六、常見問題
Q1: 跨域請求失敗？
需服務端支持 CORS（設置響應頭）：
Access-Control-Allow-Origin: *
Q2: 請求成功但頁面無反應？
檢查：
- DOM 元素是否正確獲取
- 請求路徑是否正確
- 數據格式是否解析成功（如 JSON）
七、學習資源推薦
- MDN AJAX 教程
- w3schools AJAX 教程
- jQuery AJAX 文檔
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
