嘿，朋友！是不是有时候看着浏览器控制台报红字就头大？或者明明代码写得没问题，数据就是传不过去？别慌，今天咱们就坐下来，像聊家常一样，把AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）这块硬骨头彻底啃下来。我知道你可能觉得这玩意儿枯燥，但相信我，搞懂了它，你写前端就像开挂一样顺畅。
首先，咱们得明白，AJAX是什么？说白了，就是让网页不用刷新整个页面，就能跟服务器偷偷摸摸地交换数据。想象一下，你在写评论，点“发送”后，页面没闪，但评论已经出现在上面了——这就是AJAX的魔法。当然，现在大家很少真的用XML了，JSON才是主流，但名字还留着，算是历史遗产吧。
那GET、POST、PUT、DELETE到底有啥区别？怎么发请求？
这四个玩意儿，其实是HTTP协议里最核心的方法，咱们一个一个来，用代码说话。我会用现在最流行的Fetch API，因为XMLHttpRequest有点老了，而且Fetch更现代、更简洁。不过，我也会提一下老派写法，毕竟有些老项目还在用。
GET方法：简单直接，适合拉取数据
GET是最常用的方法，用来从服务器请求数据。记住，GET请求的数据会附加在URL后面，所以你绝对不能用它来发送敏感信息，比如密码——别人一看URL就什么都知道了。另外，GET请求是可以被缓存的，浏览器可能会记住之前的请求结果，提升速度。
// 用Fetch API发送GET请求
function fetchData(userId) {
fetch(`https://api.example.com/users/${userId}`)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
return response.json(); // 解析JSON响应
})
.then(data => {
console.log('成功获取数据:', data);
// 在这里更新页面，比如显示用户信息
document.getElementById('user-info').innerText = data.name;
})
.catch(error => {
console.error('出错了:', error);
// 给用户显示错误提示
alert('获取数据失败，请稍后重试。');
});
}
// 或者用async/await写法，更直观
async function fetchDataAsync(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
const data = await response.json();
console.log('成功获取数据:', data);
return data;
} catch (error) {
console.error('请求失败:', error);
throw error; // 重新抛出，让调用者处理
}
}
你看，代码是不是挺清晰的？首先，fetch函数返回一个Promise，然后我们用.then()链式处理。如果响应不成功（比如404或500），我们手动抛出错误，这样就能被.catch()捕获。用async/await的话，代码更像同步逻辑，更容易读。
POST方法：提交数据，服务器处理
POST用来向服务器提交数据，比如用户注册、提交表单。数据放在请求体里，不会出现在URL中，所以更安全，适合传敏感信息。POST请求通常不会缓存，每次都会真正发送到服务器。
function createUser(userData) {
fetch('https://api.example.com/users', {
method: 'POST', // 明确指定方法
headers: {
'Content-Type': 'application/json', // 告诉服务器我们发的是JSON
// 'Authorization': 'Bearer your-token-here' // 如果需要认证，加上这个
},
body: JSON.stringify(userData) // 把JavaScript对象转成JSON字符串
})
.then(response => {
if (!response.ok) {
throw new Error(`创建用户失败, 状态码: ${response.status}`);
}
return response.json();
})
.then(newUser => {
console.log('用户创建成功:', newUser);
// 更新页面，比如刷新用户列表
refreshUserList();
})
.catch(error => {
console.error('请求出错:', error);
alert('创建用户失败，请检查信息并重试。');
});
}
// 假设userData是这样的
const newUser = { name: '张三', email: 'zhangsan@example.com', age: 30 };
createUser(newUser);
这里有个关键点：headers里的Content-Type: application/json。这很重要！告诉服务器你发的是JSON数据，否则服务器可能不知道如何解析。如果忘了设，服务器可能返回错误，或者解析失败。还有，body必须用JSON.stringify()转换，不然服务器收到的是个[object Object]，啥用都没有。
PUT方法：全量更新，覆盖整个资源
PUT用于更新服务器上的某个资源，但它是全量更新——也就是说，你发送的数据会替换掉服务器上现有的整个资源。如果某个字段没提供，服务器可能会把它设为null。所以，用PUT前，最好确保你提供了所有必要字段。
function updateUser(userId, updatedData) {
fetch(`https://api.example.com/users/${userId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedData)
})
.then(response => {
if (response.status === 204) {
// 204 No Content 表示成功但没有返回内容
console.log('用户更新成功');
return null;
}
if (!response.ok) {
throw new Error(`更新失败, 状态码: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data) {
console.log('更新后的用户数据:', data);
}
// 更新页面显示
displayUser(updatedData);
})
.catch(error => {
console.error('更新出错:', error);
alert('更新失败，请重试。');
});
}
// 假设我们要更新用户信息
const userToUpdate = { id: 1, name: '李四', email: 'lisi@example.com', age: 25 };
updateUser(1, userToUpdate);
注意，PUT请求成功时，服务器可能返回200（带更新后的数据）或204（成功但无内容）。所以代码里我们做了判断。还有，PUT和POST的区别：POST是创建新资源，PUT是更新现有资源，并且PUT要求幂等性——多次发送相同请求，结果应该一样。
DELETE方法：删删删，永久删除
DELETE很简单，就是删除服务器上的资源。它通常不带请求体，只通过URL指定要删除什么。同样，DELETE也是幂等的——删了第一次后，再删一次，结果还是“已删除”。
function deleteUser(userId) {
fetch(`https://api.example.com/users/${userId}`, {
method: 'DELETE'
})
.then(response => {
if (response.status === 204) {
// 204 No Content 表示删除成功
console.log('用户删除成功');
// 从页面移除该用户
removeUserFromList(userId);
} else if (response.ok) {
// 其他成功状态码，比如200
return response.json().then(() => {
console.log('用户删除成功，并收到确认');
removeUserFromList(userId);
});
} else {
throw new Error(`删除失败, 状态码: ${response.status}`);
}
})
.catch(error => {
console.error('删除出错:', error);
alert('删除用户失败，请稍后重试。');
});
}
// 调用示例
deleteUser(1);
你看，DELETE请求通常不需要headers和body，因为URL里已经包含了要删除的资源ID。不过，有些API设计可能要求你在headers里加认证信息，那就像POST那样处理就行。
常见错误处理：别让程序静默失败
上面代码里，我都用了.catch()或try...catch来处理错误。但这只是基础。实际项目中，错误可能千奇百怪：网络断了、服务器超时、数据格式不对……咱们得把这些都考虑到。
1. 网络错误和超时
网络问题是最常见的。用户可能断网了，或者服务器太忙没响应。这时候，fetch会抛出一个TypeError，而不是正常的HTTP错误。
async function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
...options,
signal: controller.signal // 把AbortController的信号传进去
});
clearTimeout(id); // 请求成功，清除超时定时器
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
return await response.json();
} catch (error) {
clearTimeout(id);
if (error.name === 'AbortError') {
throw new Error('请求超时，请稍后重试。');
}
throw error; // 其他错误重新抛出
}
}
// 使用示例
fetchWithTimeout('https://api.example.com/slow-endpoint', { method: 'GET' }, 3000)
.then(data => console.log('数据:', data))
.catch(error => alert(error.message));
这里用了AbortController来设置超时。如果3秒内没响应，就主动取消请求，然后抛出“请求超时”错误。这样用户体验更好——不会一直转圈等。
2. HTTP状态码错误
服务器可能返回各种状态码：200（成功）、400（客户端错误）、401（未授权）、403（禁止访问）、404（找不到）、500（服务器内部错误）……咱们不能只检查!response.ok，还得针对不同状态码给出具体提示。
function handleApiResponse(response) {
if (response.ok) {
return response.json().then(data => ({ success: true, data }));
}
// 根据不同状态码，给出不同错误信息
const errorMessages = {
400: '请求参数错误，请检查输入。',
401: '未授权，请登录后重试。',
403: '没有权限访问此资源。',
404: '请求的资源不存在。',
500: '服务器内部错误，请稍后重试。',
503: '服务暂时不可用，请稍后再试。'
};
const message = errorMessages[response.status] || `请求失败，状态码: ${response.status}`;
return Promise.reject(new Error(message));
}
// 在请求链中使用
fetch('https://api.example.com/data')
.then(handleApiResponse)
.then(({ data }) => console.log('成功:', data))
.catch(error => alert(error.message));
这样，用户就能知道具体是啥问题了，而不是看到一个模糊的“出错了”。
3. 数据解析错误
有时候，服务器返回了200，但数据格式不是JSON，或者JSON损坏了。这时候，response.json()会抛出SyntaxError。
async function safeFetchJson(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP错误: ${response.status}`);
}
// 检查Content-Type，确保是JSON
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
throw new Error('服务器返回的数据不是JSON格式。');
}
return await response.json();
} catch (error) {
if (error instanceof SyntaxError) {
console.error('JSON解析失败:', error.message);
throw new Error('数据格式错误，请联系管理员。');
}
throw error;
}
}
这里，我们检查了Content-Type头，确保服务器确实返回JSON。如果解析失败，就给用户一个友好的提示。
跨域问题：那个让人头疼的“CORS”
哎呀，跨域（Cross-Origin Resource Sharing，CORS）！这是前端开发中最常见的问题之一。简单说，浏览器出于安全考虑，默认禁止JavaScript向不同源（协议、域名、端口任意一个不同）发送请求。比如，你的网页在http://localhost:3000，但API在https://api.example.com，浏览器就会拦截这个请求，除非服务器明确允许。
错误信息通常是这样的：Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
1. 理解跨域的本质
首先，别怕CORS。它不是你的代码错了，而是浏览器的安全机制。要解决它，通常需要在服务器端配置，而不是在客户端。但作为前端开发者，你得知道怎么应对。
跨域检查发生在请求发出前（对于简单请求）或请求发出后（对于非简单请求）。简单请求包括：
- 方法只限于GET、POST、HEAD
- 头信息只限于Accept、Accept-Language、Content-Language、Content-Type（且值只能是application/x-www-form-urlencoded、multipart/form-data、text/plain）
- 没有自定义头信息
非简单请求（比如PUT、DELETE，或者Content-Type是application/json）会先发送一个OPTIONS预检请求，服务器得响应允许，浏览器才会发真实请求。
2. 服务器端配置（最正统的解决方案）
最佳做法是让后端开发人员在服务器响应头中添加CORS允许策略。比如，用Node.js的Express框架：
const express = require('express');
const app = express();
// 允许所有来源访问（开发环境）
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // 生产环境最好指定具体域名
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
// 如果是预检请求，直接返回200
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});
app.get('/api/data', (req, res) => {
res.json({ message: '这是来自服务器的数据' });
});
app.listen(3000, () => console.log('服务器运行在端口3000'));
或者，用Python的Flask框架，加个flask-cors扩展：
from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许所有来源，生产环境应配置具体域名
@app.route('/api/data')
def get_data():
return jsonify({'message': '这是来自服务器的数据'})
if __name__ == '__main__':
app.run(port=3000)
你看，核心就是添加Access-Control-Allow-Origin头等响应头。如果后端不方便改，就得靠前端 workaround 了。
3. 前端绕过分发限制（临时方案，不推荐长期用）
如果后端暂时没法改，你可以用一些临时办法，但要注意安全限制。
用JSONP（仅适用于GET请求）
JSONP是一种老技术，利用<script>标签不受同源策略限制的特点。但只能用于GET，而且需要后端支持JSONP格式。
function jsonp(url, callbackName) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
const uniqueCallbackName = `jsonpCallback_${Date.now()}`;
// 在全局定义回调函数
window[uniqueCallbackName] = (data) => {
resolve(data);
cleanup();
};
script.src = `${url}?callback=${uniqueCallbackName}`;
script.onerror = () => {
reject(new Error('JSONP请求失败'));
cleanup();
};
document.body.appendChild(script);
function cleanup() {
delete window[uniqueCallbackName];
document.body.removeChild(script);
}
});
}
// 使用示例
jsonp('https://api.example.com/data', 'myCallback')
.then(data => console.log('数据:', data))
.catch(error => alert(error.message));
注意，这只能用于GET，而且后端必须支持callback参数。现在新项目很少用了，但有些老旧API还在用。
用代理服务器
在开发环境中，可以在本地起一个代理服务器，把API请求转发到真实服务器。比如，用Node.js的http-proxy-middleware：
const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
// 代理所有/api开头的请求到真实服务器
app.use('/api', proxy({
target: 'https://api.example.com',
changeOrigin: true
}));
app.listen(3000, () => console.log('代理服务器运行在端口3000'));
这样，前端请求/api/data时，会转发到https://api.example.com/api/data，绕过了跨域限制。但这只是开发时的权宜之计，生产环境还是需要服务器配置CORS。
浏览器扩展或禁用安全策略（仅本地测试）
有些浏览器允许通过启动参数禁用跨域检查，比如Chrome的--disable-web-security。但千万别在生产环境用，这会让你的应用暴露在所有安全风险下。