Ajax 核心知識點全面總結

一、Ajax 基礎概念

1、定義

Ajax（Asynchronous JavaScript and XML）是一種 無需重新加載整個網頁，即可通過 JavaScript 與服務器異步交換數據的技術，用于創建更流暢、響應更快的 Web 應用。

2、核心特點

1. 異步通信：客戶端與服務器通信時不阻塞頁面渲染，用戶可繼續交互。
2. 數據驅動更新：僅更新頁面部分內容，減少帶寬消耗。
3. 多技術融合：結合 JavaScript、XML（或 JSON）、HTML/CSS 等技術。

二、Ajax 工作原理與核心組件

1、工作流程

1. 客戶端通過 JavaScript 發起請求；
2. 瀏覽器創建 XMLHttpRequest（XHR） 對象與服務器通信；
3. 服務器處理請求并返回數據（XML、JSON 等）；
4. JavaScript 接收數據并更新頁面 DOM。

2、XMLHttpRequest（XHR）對象

創建方式：const xhr = new XMLHttpRequest();
關鍵方法：

• open(method, url, async)：設置請求方法、URL 和異步模式（默認 true）。
• send(data)：發送請求，data 為請求體（GET 請求時可為 null）。
• abort()：取消請求。

關鍵屬性：

• readyState：請求狀態（0 - 未初始化，1 - 已調用 open，2 - 已接收響應頭，3 - 處理中，4 - 請求完成）。
• status：HTTP 狀態碼（如 200 成功，404 未找到）。
• responseText/responseXML：返回的文本 / XML 數據。

事件監聽：

• onreadystatechange：狀態變化時觸發，常用于檢查 readyState === 4 且 status === 200。

三、Ajax 請求方法與參數

1、常見請求方法

方法	用途	特點
GET	獲取資源	參數附在 URL 后（如 ?key=value），有長度限制，瀏覽器會緩存。
POST	提交數據	參數在請求體中，無長度限制，不會緩存。
DELETE	刪除資源	刪除指定資源，需服務器支持。
PUT	更新資源	覆蓋式更新，需服務器支持。

2、請求參數處理

• GET 請求：url + '?param1=value1&param2=value2'
• POST 請求：需設置請求頭 Content-Type，如：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

或發送 JSON 數據：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ param1: 'value1', param2: 'value2' }));

四、Ajax 異步與錯誤處理

1、異步處理

• 傳統回調：通過 onreadystatechange 監聽請求完成。
• Promise 封裝（現代方式）：

function fetchData(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.onload = () => resolve(xhr.response);xhr.onerror = () => reject(new Error('請求失敗'));xhr.send();});
}

2、錯誤處理

• onerror 事件：處理網絡錯誤（如服務器不可達）。
• 狀態碼判斷：

if (xhr.status >= 200 && xhr.status < 300) {// 成功處理
} else {// 錯誤處理，如 404、500 等
}

五、跨域資源共享（CORS）與解決方案

1、跨域問題

• 同源策略限制：瀏覽器禁止不同域名（協議、域名、端口任一不同）的請求交互。
• 常見錯誤：Access-Control-Allow-Origin 缺失。

2、解決方案

• 服務器配置 CORS：在響應頭中添加：

Access-Control-Allow-Origin: * （允許所有域名，生產環境建議指定域名）
Access-Control-Allow-Methods: GET, POST, PUT

• 代理服務器：前端請求本地代理，由代理轉發至目標服務器（如 Node.js 中間件）。
• JSONP：利用 script 標簽跨域特性（僅支持 GET 請求）：

function loadScript(url, callback) {const script = document.createElement('script');script.src = url + `?callback=${callback.name}`;window[callback.name] = callback;document.body.appendChild(script);
}

六、Ajax 與現代替代方案

1、Fetch API（ES6+）

• 優點：更簡潔的 Promise 接口，支持流式響應。
• 示例：

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

2、Axios（第三方庫）

• 優點：支持 Promise、請求 / 響應攔截、自動轉換 JSON、瀏覽器與 Node 通用。

axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => console.error(error));

七、Ajax 最佳實踐與性能優化

請求優化：

• 合并多個小請求為大請求，減少 HTTP 連接開銷。
• 使用 GET 請求緩存數據（設置 Cache-Control 頭）。

防抖與節流：避免頻繁請求（如搜索聯想功能）。

超時處理：設置 xhr.timeout 和 ontimeout 事件。
請求取消：使用 AbortController（Fetch API）或 xhr.abort()。

八、Ajax 安全性考慮

• XSS（跨站腳本攻擊）：對用戶輸入數據進行轉義，避免直接插入 DOM。
• CSRF（跨站請求偽造）：使用 token 驗證請求來源，或設置 SameSite cookie。
• 敏感數據傳輸：使用 HTTPS 加密通信。

九、經典 Ajax 示例（原生 JavaScript）

// 發送 GET 請求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users', true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {const users = JSON.parse(xhr.responseText);document.getElementById('users-list').innerHTML = users.map(user => `<li>${user.name}</li>`).join('');}
};
xhr.send();// 發送 POST 請求
const xhrPost = new XMLHttpRequest();
xhrPost.open('POST', 'https://api.example.com/login', true);
xhrPost.setRequestHeader('Content-Type', 'application/json');
xhrPost.onload = function() {if (xhrPost.status === 200) {alert('登錄成功');}
};
xhrPost.send(JSON.stringify({ username: 'user', password: 'pass' }));

十、Ajax 封裝全局 API

/*** 通用 AJAX 請求工具* 封裝了 GET、POST、PUT、DELETE 等常用 HTTP 請求方法*/
const HttpUtils = {/*** 發送 GET 請求* @param {string} url - 請求URL* @param {Object} params - 請求參數* @param {Object} options - 額外配置選項* @returns {Promise<Object>} - 返回Promise對象*/get(url, params = {}, options = {}) {return this.request('GET', url, params, null, options);},/*** 發送 POST 請求* @param {string} url - 請求URL* @param {Object} data - 請求數據* @param {Object} options - 額外配置選項* @returns {Promise<Object>} - 返回Promise對象*/post(url, data = {}, options = {}) {return this.request('POST', url, {}, data, options);},/*** 發送 PUT 請求* @param {string} url - 請求URL* @param {Object} data - 請求數據* @param {Object} options - 額外配置選項* @returns {Promise<Object>} - 返回Promise對象*/put(url, data = {}, options = {}) {return this.request('PUT', url, {}, data, options);},/*** 發送 DELETE 請求* @param {string} url - 請求URL* @param {Object} params - 請求參數* @param {Object} options - 額外配置選項* @returns {Promise<Object>} - 返回Promise對象*/delete(url, params = {}, options = {}) {return this.request('DELETE', url, params, null, options);},/*** 發送 HTTP 請求* @param {string} method - HTTP方法* @param {string} url - 請求URL* @param {Object} params - 請求參數* @param {Object} data - 請求數據* @param {Object} options - 額外配置選項* @returns {Promise<Object>} - 返回Promise對象*/request(method, url, params, data, options) {// 處理URL參數if (params && Object.keys(params).length > 0) {const queryString = Object.entries(params).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');url += (url.includes('?') ? '&' : '?') + queryString;}// 創建基礎配置const config = {method,headers: {'Content-Type': 'application/json',...options.headers},credentials: options.credentials || 'same-origin',...options};// 添加請求體if (data && (method === 'POST' || method === 'PUT')) {config.body = JSON.stringify(data);}// 返回Promise對象return new Promise((resolve, reject) => {fetch(url, config).then(response => {// 檢查HTTP狀態碼if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}// 根據Content-Type解析響應const contentType = response.headers.get('Content-Type');if (contentType && contentType.includes('application/json')) {return response.json();} else if (contentType && contentType.includes('text/')) {return response.text();} else {return response.blob();}}).then(result => resolve(result)).catch(error => {console.error('Request failed:', error);reject(error);});});}
};export default HttpUtils;    

以上代碼封裝了常用的 AJAX 請求方法，支持 GET、POST、PUT、DELETE 四種 HTTP 方法。該工具使用原生的 Fetch API 實現，返回 Promise 對象以便于使用 async/await 語法。主要特點：

• 支持請求參數自動序列化
• 自動處理響應內容類型解析（JSON、文本、二進制）
• 統一的錯誤處理機制
• 支持自定義請求頭和其他配置選項

在你的項目中，可以將此文件保存為 http-utils.js，然后通過 import 語句在需要的地方引入使用，例如：

import HttpUtils from './http-utils.js';// 使用示例
async function fetchData() {try {// GET 請求示例const result = await HttpUtils.get('/api/users', { page: 1, size: 10 });console.log('GET 請求結果:', result);// POST 請求示例const newUser = { name: 'John', age: 30 };const createResult = await HttpUtils.post('/api/users', newUser);console.log('POST 請求結果:', createResult);} catch (error) {console.error('請求出錯:', error);}
}