Ajax 核心知识点全面总结

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);}
}