AJAX 请求方法详解从基础概念到实际应用与常见问题解决方案

什么是 AJAX？基础概念解析
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。尽管名字中包含 XML，但现代 AJAX 应用更多使用 JSON 格式进行数据交换。
AJAX 的核心优势
AJAX 的主要优势在于其异步特性。传统的 Web 应用通过同步请求工作，这意味着用户在执行操作时必须等待服务器响应，整个页面会重新加载。而 AJAX 允许浏览器与服务器进行后台通信，用户可以在等待响应的同时继续与页面交互。
AJAX 的工作原理
AJAX 的工作流程可以分为以下几个步骤：
用户在网页上触发某个事件（如点击按钮）
JavaScript 创建 XMLHttpRequest 对象
向服务器发送请求
服务器处理请求并返回数据
JavaScript 接收响应并更新页面内容
原生 JavaScript 实现 AJAX
XMLHttpRequest 对象
XMLHttpRequest（XHR）是 AJAX 的基础。虽然现代开发中我们更多使用 Fetch API，但了解 XHR 仍然很重要，特别是在处理旧代码或需要支持旧浏览器时。
创建 XHR 对象
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open(‘GET’, ‘https://api.example.com/data’, true);

// 设置响应类型
xhr.responseType = ‘json’;

// 设置请求头（如果需要）
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);

// 定义 onload 事件处理函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) { console.log('请求成功:', xhr.response); // 在这里处理返回的数据 updatePageContent(xhr.response); } else { console.error('请求失败:', xhr.status); } }; // 定义 onerror 事件处理函数 xhr.onerror = function() { console.error('网络错误'); }; // 发送请求 xhr.send(); 处理不同类型的请求 GET 请求：用于获取数据，参数通过 URL 传递 // 带参数的 GET 请求 const userId = 123; const url = `https://api.example.com/users/${userId}`; const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onload = function() { if (200 <= xhr.status && xhr.status < 300) { const user = xhr.response; console.log('用户信息:', user); } }; xhr.send(); POST 请求：用于提交数据，数据在请求体中发送 // POST 请求示例 const userData = { name: '张三', email: 'zhangsan@example.com' }; const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/users', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 201) { console.log('用户创建成功'); } }; xhr.send(JSON.stringify(userData)); PUT 请求：用于更新现有资源 // PUT 请求示例 const updatedData = { name: '张三', email: 'zhangsan.new@example.com' }; const xhr = new XMLHttpRequest(); xhr.open('PUT', 'https://api.example.com/users/123', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { console.log('用户更新成功'); } }; xhr.send(JSON.stringify(updatedData)); DELETE 请求：用于删除资源 // DELETE 请求示例 const xhr = new XMLHttpRequest(); xhr.open('DELETE', 'https://api.example.com/users/123', true); xhr.onload = function() { if (xhr.status === 204) { console.log('用户删除成功'); } }; xhr.send(); 使用 Fetch API 实现 AJAX Fetch API 是现代浏览器提供的更强大、更灵活的 AJAX 解决方案。它基于 Promise，语法更简洁。基本 GET 请求 // 基本 GET 请求 fetch('https://api.example.com/data') .then(response => {
// 检查响应状态
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // 解析 JSON 数据
})
.then(data => {
console.log(‘获取的数据:’, data);
updatePageContent(data);
})
.catch(error => {
console.error(‘请求失败:’, error);
});
POST 请求
// POST 请求示例
const userData = {
name: ‘李四’,
email: ‘lisi@example.com’
};

fetch(‘https://api.example.com/users’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(userData)
})
.then(response => {
if (!response.ok) {
throw new Error(‘网络响应不正常’);
}
return response.json();
})
.then(data => {
console.log(‘创建成功:’, data);
})
.catch(error => {
console.error(‘错误:’, error);
});
使用 async/await 简化代码
// 使用 async/await 的 GET 请求
async function fetchUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const userData = await response.json();
console.log(‘用户数据:’, userData);
return userData;
} catch (error) {
console.error(‘获取用户数据失败:’, error);
// 可以在这里处理错误，比如显示错误信息给用户
showErrorToUser(‘无法获取用户数据，请稍后重试’);
return null;
}
}

// 使用 async/await 的 POST 请求
async function createUserData(userData) {
try {
const response = await fetch(‘https://api.example.com/users’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(userData)
});

if (!response.ok) {
throw new Error(`创建失败: ${response.status}`);
}

const result = await response.json();
console.log(‘创建成功:’, result);
return result;
} catch (error) {
console.error(‘创建用户失败:’, error);
showErrorToUser(‘创建用户失败，请检查网络连接’);
return null;
}
}
处理不同响应类型
// 处理文本响应
async function fetchText() {
const response = await fetch(‘https://api.example.com/text’);
const text = await response.text();
console.log(‘文本内容:’, text);
}

// 处理 Blob 响应（如图片）
async function fetchImage() {
const response = await fetch(‘https://api.example.com/image.jpg’);
const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);
document.getElementById(‘image’).src = imageUrl;
}

// 处理 FormData
async function submitFormData() {
const formData = new FormData();
formData.append(‘username’, ‘张三’);
formData.append(‘avatar’, fileInput.files[0]);

const response = await fetch(‘https://api.example.com/upload’, {
method: ‘POST’,
body: formData
});

// 带参数的 POST 请求
$.ajax({
url: ‘https://api.example.com/users’,
method: ‘POST’,
contentType: ‘application/json’,
data: JSON.stringify({
name: ‘王五’,
email: ‘wangwu@example.com’
}),
success: function(data) {
console.log(‘创建成功:’, data);
},
error: function(xhr, status, error) {
console.error(‘创建失败:’, error);
}
});
jQuery 的快捷方法
jQuery 提供了多个快捷方法，使常见操作更简单。
$.get() 方法
// 基本 GET 请求
$.get(‘https://api.example.com/data’, function(data, status) {
console.log(‘数据:’, data);
console.log(‘状态:’, status);
});

// 带参数的 GET 请求
$.get(‘https://api.example.com/users’, { id: 123 }, function(data) {
console.log(‘用户数据:’, data);
});

// 使用 Promise
$.get(‘https://api.example.com/data’)
.done(function(data) {
console.log(‘成功:’, data);
})
.fail(function(error) {
console.error(‘失败:’, error);
})
.always(function() {
console.log(‘请求完成’);
});
$.post() 方法
// 基本 POST 请求
$.post(‘https://api.example.com/users’, {
name: ‘赵六’,
email: ‘zhaoliu@example.com’
}, function(data) {
console.log(‘创建成功:’, data);
});

// 发送 JSON 数据
$.ajax({
url: ‘https://api.example.com/users’,
method: ‘POST’,
contentType: ‘application/json’,
data: JSON.stringify({
name: ‘赵六’,
1: ‘zhaoliu@example.com’
}),
success: function(data) {
jQuery.post(‘https://api.example.com/users’, data, function(response) {
console.log(‘响应:’, response);
});
}
});
$.getJSON() 方法
// 获取 JSON 数据
$.getJSON(‘https://api.example.com/users/123’, function(data) {
console.log(‘用户数据:’, data);
// 自动解析 JSON
$(‘#username’).text(data.name);
$(‘#useremail’).text(data.email);
});

// 带参数的请求
$.getJSON(‘https://api.example.com/users’, { role: ‘admin’ }, function(data) {
console.log(‘管理员列表:’, data);
});
现代 AJAX 库：Axios
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它提供了更简洁的 API 和更好的错误处理。
Axios 基础用法
// 引入 Axios (通过 CDN)
//

// 基本 GET 请求
axios.get(‘https://api.example.com/data’)
.then(response => {
console.log(‘数据:’, response.data);
})
.catch(error => {
console.error(‘错误:’, error);
});

// 带参数的 GET 请求
axios.get(‘https://api.example.com/users’, {
params: {
id: 123,
role: ‘admin’
}
})
.then(response => {
console.log(‘用户数据:’, response.data);
});
Axios POST 请求
// 发送 JSON 数据
const userData = {
name: ‘钱七’,
email: ‘qianqi@example.com’
};

axios.post(‘https://api.example.com/users’, userData)
.then(response => {
console.log(‘创建成功:’, response.data);
console.log(‘状态码:’, response.status);
console.log(‘响应头:’, response.headers);
})
.catch(error => {
if (error.response) {
// 服务器响应了错误状态码
console.error(‘服务器错误:’, error.response.status);
console.error(‘错误数据:’, error.response.data);
} else if (error.request) {
// 请求已发出但没有收到响应
console.error(‘网络错误:’, error.request);
}实例
// 发送请求时出错
console.error(‘配置错误:’, error.message);
}
});
Axios 配置
// 全局配置
axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.timeout = 10000; // 10秒超时
axios.defaults.headers.common[‘Authorization’] = ‘Bearer ‘ + localStorage.getItem(‘token’);

// 创建实例
const api = axios.create({
baseURL: ‘https://api.example.com’,
timeout: 5000,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Custom-Header’: ‘foobar’
}
});

// 使用实例
api.get(‘/users/123’)
.then(response => {
console.log(‘用户数据:’, response.data);
});
Axios 拦截器
拦截器是 Axios 的强大特性，可以在请求或响应被 then/catch 处理之前拦截它们。
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem(‘token’);
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
console.log(‘请求配置:’, config);
return config;
},
error => {
// 对请求错误做些什么
console.error(‘请求拦截器错误:’, error);
return Promise.reject(error);
}
);

// 响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
console.log(‘响应数据:’, response);
return response;
},
error => {
// 对响应错误做点什么
if (error.response) {
if (error.response.status === 401) {
// 未授权，跳转到登录页
window.location.href = ‘/login’;
} else if (error.response.status === 403) {
// 无权限
alert(‘您没有权限执行此操作’);
} else if (error.response.status >= 500) {
// 服务器错误
alert(‘服务器错误，请稍后重试’);
}
}
return Promise.reject(error);
}
);
AJAX 请求的常见问题与解决方案
1. 跨域问题 (CORS)
跨域资源共享（CORS）是现代浏览器实施的安全策略，限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
问题表现
：
Access to fetch at ‘https://api.example.com/data’ from origin ‘https://myapp.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决方案
：
前端解决方案
：
// 如果 API 支持 CORS，确保请求包含必要的头信息
fetch(‘https://api.example.com/data’, {
method: ‘GET’,
credentials: ‘include’, // 如果需要发送 cookies
mode: ‘cors’ // 明确指定 CORS 模式
})
.then(response => response.json())
.then(data => console.log(data));

// 对于不支持 CORS 的 API，可以使用代理服务器
// 例如，通过自己的服务器转发请求
fetch(‘/api/proxy?url=https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
后端解决方案
（以 Node.js/Express 为例）：
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();

// 简单配置
app.use(cors());

// 精细配置
const corsOptions = {
origin: ‘https://myapp.com’, // 允许的源
methods: [‘GET’, ‘POST’, ‘PUT’, ‘DELETE’], // 允许的方法
allowedHeaders: [‘Content-Type’, ‘Authorization’], // 允许的头
credentials: true, // 允许发送 cookies
maxAge: 86400 // 预检请求缓存时间（秒）
};

app.use(cors(corsOptions));

// 特定路由的 CORS
app.get(‘/api/data’, cors({
origin: ‘https://trusted-app.com’
}), (req, res) => {
res.json({ message: ‘This is CORS-enabled for a trusted domain’ });
});
2. 请求超时
问题表现
：请求长时间无响应，导致用户体验差。
解决方案
：
Fetch API 超时处理
：
// 使用 AbortController 实现超时
const controller = new AbortController();
const signal = controller.signal;

// 设置超时
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时

fetch(‘https://api.example.com/data’, { signal })
.then(response => {
clearTimeout(timeoutId);
return response.json();
})
.then(data => {
console.log(‘数据:’, data);
})
.catch(error => {
if (error.name === ‘AbortError’) {
console.error(‘请求超时’);
showError(‘请求超时，请稍后重试’);
} else {
console.error(‘其他错误:’, error);
}
});
Axios 超时配置
：
// Axios 超时配置
axios.get(‘https://api.example.com/data’, {
timeout: 5000 // 5秒超时
})
.then(response => {
console.log(‘数据:’, response.data);
})
.catch(error => {
if (error.code === ‘ECONNABORTED’) {
console.error(‘请求超时’);
showError(‘请求超时，请稍后重试’);
} else {
console.error(‘其他错误:’, error);
}
});
jQuery 超时配置
：
$.ajax({
url: ‘https://api.example.com/data’,
method: ‘GET’,
timeout: 5000, // 5秒超时
success: function(data) {
console.log(‘数据:’, data);
},
error: function(xhr, status, error) {
if (status === ‘timeout’) {
console.error(‘请求超时’);
showError(‘请求超时，请稍后重试’);
} else {
console.error(‘其他错误:’, error);
}
}
});
3. 错误处理最佳实践
问题表现
：网络错误、服务器错误、数据格式错误等。
解决方案
：
统一错误处理函数
：
// 统一的错误处理函数
function handleAjaxError(error, userMessage = ‘操作失败，请稍后重试’) {
console.error(‘AJAX 错误:’, error);

// 根据错误类型显示不同信息
if (error.name === ‘AbortError’) {
showError(‘请求超时，请检查网络连接’);
} else if (error.response) {
// 服务器响应了错误状态码
const status = error.response.status;
if (status === 401) {
showError(‘未授权，请重新登录’);
// 可以在这里跳转到登录页
} else if (status === 403) {
showError(‘您没有权限执行此操作’);
} else if (status >= 500) {
showError(‘服务器错误，请稍后重试’);
} else {
showError(userMessage);
}
} else if (error.request) {
// 请求已发出但没有收到响应
showError(‘网络错误，请检查您的网络连接’);
} else {
// 发送请求时出错
showError(userMessage);
}
}

// 使用示例
async function fetchData() {
try {
const response = await fetch(‘https://api.example.com/data’);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
handleAjaxError(error, ‘获取数据失败’);
return null;
}
}
4. 请求取消与竞态条件
问题表现
：用户快速连续点击按钮导致多个请求同时发出，或者组件卸载时请求仍在进行。
解决方案
：
使用 AbortController
：
class DataService {
constructor() {
this.controller = null;
}

async fetchData() {
// 取消之前的请求
if (this.controller) {
this.controller.abort();
}

// 创建新的控制器
this.controller = new AbortController();

try {
const response = await fetch(‘https://api.example.com/data’, {
signal: this.controller.signal
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

return await response.json();
} catch (error) {
if (error.name === ‘AbortError’) {
console.log(‘请求被取消’);
return null;
}
throw error;
}
}

// 组件卸载时取消请求
cleanup() {
if (this.controller) {
this.controller.abort();
}
}
}

// 在 React/Vue 组件中使用
const dataService = new DataService();

// 组件挂载时
useEffect(() => {
dataService.fetchData().then(data => {
if (data) {
// 更新状态
}
});

// 组件卸载时
return () => {
dataService.cleanup();
};
}, []);
Axios 的取消功能
：
// 创建取消令牌
const source = axios.CancelToken.source();

// 发送请求
axios.get(‘https://api.example.com/data’, {
cancelToken: source.token
})
.then(response => {
console.log(‘数据:’, response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log(‘请求被取消:’, error.message);
} else {
console.error(‘其他错误:’, error);
}
});

// 取消请求
source.cancel(‘用户取消了操作’);
5. 并发请求处理
问题表现
：需要同时发送多个请求，等待所有请求完成后处理结果。
解决方案
：
Promise.all()
：
// 并发请求示例
async function fetchMultipleData() {
try {
const [users, posts, comments] = await Promise.all([
fetch(‘https://api.example.com/users’).then(r => r.json()),
fetch(‘https://api.example.com/posts’).then(r => r.json()),
fetch(‘https://api.example.com/comments’).then(r => r.json())
]);

console.log(‘用户:’, users);
console.log(‘帖子:’, posts);
console.log(‘评论:’, comments);

// 处理数据
return { users, posts, comments };
} catch (error) {
console.error(‘并发请求失败:’, error);
// 如果任何一个请求失败，整个 Promise.all 会立即拒绝
// 可以使用 Promise.allSettled 来获取所有结果
}
}
Promise.allSettled()
：
// 使用 Promise.allSettled 处理部分失败的情况
async function fetchMultipleDataSafe() {
const results = await Promise.allSettled([
fetch(‘https://api.example.com/users’).then(r => r.json()),
fetch(‘https://api.example.com/posts’).then(r => r.json()),
fetch(‘https://api.example.com/comments’).then(r => r.json())
]);

const successfulResults = results.filter(r => r.status === ‘fulfilled’);
const failedResults = results.filter(r => r.status === ‘rejected’);

console.log(‘成功的请求:’, successfulResults.map(r => r.value));
console.log(‘失败的请求:’, failedResults.map(r => r.reason));

return {
success: successfulResults.map(r => r.value),
failed: failedResults.map(r => r.reason)
};
}
Axios 并发请求
：
// Axios 并发请求
const userRequest = axios.get(‘https://api.example.com/users’);
const postsRequest = axios.get(‘https://api.example.com/posts’);

axios.all([userRequest, postsRequest])
.then(axios.spread((users, posts) => {
console.log(‘用户:’, users.data);
console.log(‘帖子:’, posts.data);
}))
.catch(error => {
console.error(‘并发请求失败:’, error);
});
6. 请求重试机制
问题表现
：网络不稳定或服务器临时故障导致请求失败。
解决方案
：
带重试的 Fetch
：
// 带重试机制的请求函数
async function fetchWithRetry(url, options = {}, maxRetries = 3, delay = 1000) {
for (let i = 0; i < maxRetries; i++) { try { const response = await fetch(url, options); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { // 如果是最后一次尝试，抛出错误 if (i === maxRetries - 1) { throw error; } // 等待一段时间后重试 console.log(`请求失败，${delay}ms 后重试...`); await new Promise(resolve => setTimeout(resolve, delay));

// 指数退避：每次重试等待时间加倍
delay *= 2;
}
}
}

// 使用示例
fetchWithRetry(‘https://api.example.com/data’, {}, 3, 1000)
.then(data => {
console.log(‘成功获取数据:’, data);
})
.catch(error => {
console.error(‘多次重试后仍然失败:’, error);
});
Axios 重试插件
：
// 使用 axios-retry 插件
import axios from ‘axios’;
import axiosRetry from ‘axios-retry’;

// 配置重试
axiosRetry(axios, {
retries: 3, // 重试次数
retryDelay: (retryCount) => {
return retryCount * 1000; // 每次重试延迟时间
},
retryCondition: (error) => {
// 只在特定条件下重试
return error.response && error.response.status >= 500;
}
});

// 使用
axios.get(‘https://api.example.com/data’)
.then(response => {
console.log(‘数据:’, response.data);
})
.catch(error => {
console.error(‘多次重试后仍然失败:’, error);
});
7. 缓存策略
问题表现
：重复请求相同数据，浪费带宽和服务器资源。
解决方案
：
简单缓存实现
：
class RequestCache {
constructor() {
this.cache = new Map();
this.pendingRequests = new Map();
}

async get(url, options = {}) {
const key = `${url}:${JSON.stringify(options)}`;

// 检查缓存
if (this.cache.has(key)) {
const cached = this.cache.get(key);
// 检查缓存是否过期
if (Date.now() – cached.timestamp < 60000) { // 1分钟过期 return cached.data; } else { this.cache.delete(key); } } // 检查是否有相同的请求正在进行 if (this.pendingRequests.has(key)) { return this.pendingRequests.get(key); } // 发起新请求 const request = fetch(url, options) .then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
this.cache.set(key, { data, timestamp: Date.now() });
this.pendingRequests.delete(key);
return data;
})
.catch(error => {
this.pendingRequests.delete(key);
throw error;
});

this.pendingRequests.set(key, request);
return request;
}

// 清除缓存
clear() {
this.cache.clear();
this.pendingRequests.clear();
}

// 清除特定缓存
invalidate(url, options = {}) {
const key = `${url}:${JSON.stringify(options)}`;
this.cache.delete(key);
}
}

// 使用示例
const cache = new RequestCache();

// 第一次请求
cache.get(‘https://api.example.com/data’)
.then(data => console.log(‘第一次:’, data));

// 第二次请求（相同 URL，会使用缓存）
setTimeout(() => {
cache.get(‘https://api.example.com/data’)
.then(data => console.log(‘第二次（缓存）:’, data));
}, 1000);
8. 安全考虑
问题表现
：AJAX 请求可能面临 CSRF、XSS 等安全威胁。
解决方案
：
CSRF 保护
：
// 在请求中包含 CSRF token
async function fetchWithCSRF(url, options = {}) {
const csrfToken = document.querySelector(‘meta[name=”csrf-token”]’)?.content;

const headers = {
…options.headers,
‘X-CSRF-Token’: csrfToken
};

return fetch(url, {
…options,
headers,
credentials: ‘include’ // 包含 cookies
});
}

// 使用示例
fetchWithCSRF(‘https://api.example.com/action’, {
method: ‘POST’,
body: JSON.stringify({ action: ‘delete’ })
})
.then(response => response.json())
.then(data => console.log(‘操作成功:’, data));
输入验证和输出编码
：
// 验证输入
function validateInput(input) {
// 移除或转义潜在的危险字符
return input.replace(/[<>]/g, ”);
}

// 安全地更新 DOM
function safeUpdateDOM(elementId, data) {
const element = document.getElementById(elementId);
if (element) {
// 使用 textContent 而不是 innerHTML 来防止 XSS
element.textContent = data;
}
}

// 使用示例
const userInput = ‘‘;
const safeInput = validateInput(userInput);
safeUpdateDOM(‘output’, safeInput);
HTTPS 和安全头
：
// 确保使用 HTTPS
const API_BASE_URL = ‘https://api.example.com’; // 而不是 http

// 设置安全的请求头
const secureHeaders = {
‘Content-Type’: ‘application/json’,
‘X-Content-Type-Options’: ‘nosniff’,
‘X-Frame-Options’: ‘DENY’,
‘X-XSS-Protection’: ‘1; mode=block’
};

// 安全的 Fetch 配置
const secureFetch = (url, options = {}) => {
return fetch(url, {
…options,
headers: {
…secureHeaders,
…options.headers
},
credentials: ‘same-origin’, // 限制 cookies 发送范围
mode: ‘cors’ // 明确 CORS 模式
});
};
总结
AJAX 是现代 Web 开发的基础技术，从原生的 XMLHttpRequest 到现代的 Fetch API，再到功能强大的 Axios 库，开发者有多种选择来实现异步通信。
最佳实践总结
选择合适的工具
：
简单项目：使用原生 Fetch API
复杂项目：使用 Axios
遗留项目：可能需要使用 jQuery 或 XMLHttpRequest
错误处理
：
始终处理网络错误和服务器错误
提供用户友好的错误信息
实现重试机制
性能优化
：
实现缓存策略
处理并发请求
取消不必要的请求
安全性
：
使用 HTTPS
防止 CSRF 和 XSS 攻击
验证输入和输出
用户体验
：
显示加载状态
处理超时
提供取消选项
通过掌握这些技术和最佳实践，您可以构建出更可靠、更高效、更安全的 Web 应用程序。记住，良好的 AJAX 实现不仅仅是技术问题，更是用户体验和安全性的重要组成部分。

AJAX 请求方法详解 从基础概念到实际应用与常见问题解决方案