目錄

1. 什么是 AJAX？

2. 工作原理

3. XMLHttpRequest 基礎

4. 現代 Fetch API

5. Axios 第三方庫

6. 數據處理

7. 錯誤處理機制

8. 跨域請求解決方案

9. 最佳實踐

10. 總結

---

1. 什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一種通過瀏覽器與服務器進行異步通信的技術，它允許：

• 在不刷新頁面的情況下更新內容

• 實現局部頁面刷新

• 提升用戶體驗和性能

核心優勢：

傳統請求 → 整頁刷新（白屏等待）
AJAX 請求 → 局部更新（無縫交互）

---

2. 工作原理

1. 用戶觸發事件（點擊/滾動等）

2. 創建 XMLHttpRequest 對象

3. 向服務器發送請求

4. 服務器處理請求

5. 返回響應數據

6. 客戶端處理響應并更新 DOM

---

3. XMLHttpRequest 基礎

3.1 基礎用法

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText));} else {console.error('請求失敗:', xhr.status);}}
};xhr.send();

3.2 關鍵屬性解析

屬性/方法	說明
readyState	0-4 的請求狀態碼
status	HTTP 狀態碼（200, 404等）
responseType	指定響應格式（json/blob等）
setRequestHeader()	設置請求頭

---

4. 現代 Fetch API

4.1 基礎用法

fetch('https://api.example.com/data').then(response => {if (!response.ok) throw new Error('Network error');return response.json();}).then(data => console.log(data)).catch(error => console.error('Error:', error));

  .catch(error => console.error('Error:', error));

4.2 Async/Await 優化

async function loadData() {try {const response = await fetch('/api/data');const data = await response.json();renderData(data);} catch (error) {showError(error.message);}
}

---

5. Axios 第三方庫

5.1 安裝與基礎使用

npm install axios

axios.get('/user?ID=12345').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

5.2 高級功能

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';// 攔截器
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${token}`;return config;
});

---

6. 數據處理

6.1 JSON 處理

// 自動解析
const response = await fetch(url);
const data = await response.json();// 手動處理
xhr.responseType = 'json';
xhr.onload = () => console.log(xhr.response);

6.2 表單提交

const formData = new FormData(document.getElementById('myForm'));
fetch('/submit', {method: 'POST',body: formData
});

---

7. 錯誤處理機制

7.1 通用錯誤處理

function handleErrors(response) {if (!response.ok) {throw new Error(`HTTP錯誤 ${response.status}`);}return response;
}fetch(url).then(handleErrors).then(/* 處理正常響應 */).catch(/* 處理所有錯誤 */);

7.2 超時處理

// Fetch + AbortController
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);fetch(url, { signal: controller.signal }).catch(err => {if (err.name === 'AbortError') {console.log('請求超時');}});

---

8. 跨域請求解決方案

8.1 CORS 配置

// 服務器端設置
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

8.2 開發環境代理

// webpack.config.js
module.exports = {devServer: {proxy: {'/api': 'http://localhost:3000'}}
}

---

9. 最佳實踐

1. 性能優化

   • 使用請求節流（throttle）

   • 實現加載狀態提示

   • 緩存頻繁訪問的數據

2. 安全防護

   • 驗證和過濾用戶輸入

   • 使用 CSRF Token

   axios.defaults.headers.common['X-CSRF-TOKEN'] = token;

3. 代碼規范

   • 統一封裝請求模塊

   • 使用 ES6+ 語法

   • 添加必要的注釋

---

10. 總結

技術選型建議：

• 簡單請求 → 使用原生?fetch()

• 復雜項目 → 選擇?Axios

• 舊瀏覽器支持 →?XMLHttpRequest

學習路線：

1. 掌握同源策略和 CORS

2. 熟練使用開發者工具網絡面板

3. 學習 RESTful API 設計規范

擴展閱讀：

• MDN AJAX 文檔

• Fetch API 規范

• Axios 官方文檔