AJAX的核心写法是通过XMLHttpRequest对象或Fetch API异步加载数据，无需刷新页面即可更新局部内容，这是现代Web开发的基础技能。
很多初学者在接触前端开发时，总以为网页跳转就是唯一的交互方式，这种认知已经过时了，现在的用户期望页面像原生应用一样流畅，点击按钮后数据瞬间呈现，而不是看着白屏转圈，AJAX（Asynchronous JavaScript and XML）虽然名字里带着XML，但如今它主要处理JSON数据，掌握它的正确写法,是构建高性能Web应用的必经之路。
传统AJAX与Fetch API的对比分析
在深入代码之前，我们需要理清技术演进的脉络，业内专家指出，从XMLHttpRequest到Fetch API的过渡，不仅仅是语法的简化,更是编程思维的转变。
XMLHttpRequest的局限性
XMLHttpRequest（XHR）是AJAX技术的鼻祖，它在IE6时代就存在，兼容性极好，但写法繁琐，你需要监听不同的状态码（readyState），处理回调地狱，还要手动解析响应文本，对于复杂的数据交互，XHR的代码可读性较差,维护成本高。
Fetch API的优势所在
Fetch API基于Promise，写法更加简洁直观，它返回一个Promise对象，支持链式调用，天然适合异步编程，更重要的是，Fetch是原生API，不依赖jQuery等第三方库，体积更小,性能更优。
| 特性 | XMLHttpRequest | Fetch API |
|---|---|---|
| 语法风格 | 回调函数，事件驱动 | Promise链式调用 |
| 错误处理 | 需检查status和readyState | 仅网络错误拒绝Promise，HTTP错误不拒绝 |
| 数据格式 | 默认文本，需手动JSON.parse | 原生支持.json()方法 |
| 浏览器支持 | 所有浏览器，包括IE | 现代浏览器，IE不支持 |
AJAX请求的标准实现步骤
无论是使用哪种方式，AJAX的核心逻辑都是固定的：创建请求、配置参数、发送请求、处理响应，下面以目前主流的Fetch API为例,拆解具体的操作流程。
基础GET请求写法
获取数据是最常见的场景，假设我们要从服务器获取用户列表,代码结构如下：
- 调用fetch方法,传入URL地址。
- 使用.then()处理成功的响应。
- 调用response.json()将数据转换为JavaScript对象。
- 在下一个.then()中处理具体数据。
- 使用.catch()捕获网络错误或解析错误。
具体代码示例：
fetch('/api/users')
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json();
})
.then(data => {
console.log('获取到的用户数据:', data);
// 在这里更新DOM，渲染用户列表
})
.catch(error => {
console.error('请求失败:', error);
});
注意，这里有一个常见的陷阱，Fetch在收到HTTP错误状态码（如404或500）时，并不会拒绝Promise，而是正常返回Response对象，必须手动检查response.ok属性,否则错误处理逻辑会失效。
POST请求与数据提交
当需要向服务器提交数据时，比如用户注册或表单提交，必须配置Request Headers和Body。
fetch('/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'newuser',
password: 'secure123'
})
})
.then(response => response.json())
.then(data => console.log('注册结果:', data))
.catch(error => console.error('注册失败:', error));
关键点在于Content-Type必须设置为application/json，否则后端可能无法正确解析JSON字符串，JavaScript对象必须通过JSON.stringify()转换为字符串才能放入Body中。
异步编程进阶：Async/Await写法
虽然Promise链式调用已经比XHR简洁，但多层嵌套依然会让代码变得难以阅读，Async/Await是ES2017引入的特性,它让异步代码看起来像同步代码一样直观。
如何优雅地处理异步流程
使用async函数包裹请求逻辑，用await关键字暂停执行,直到Promise解决。
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error('用户不存在');
}
const user = await response.json();
return user;
} catch (error) {
console.error('获取用户信息失败:', error);
return null;
}
}
这种写法极大地提升了代码的可读性，错误处理统一放在try-catch块中，避免了多层嵌套的.catch()，对于初学者来说，理解async/await比理解Promise链更容易上手。
并发请求的最佳实践
在实际开发中，我们经常需要同时请求多个接口，比如同时获取用户信息和订单列表，如果使用串行await，总耗时是各个请求耗时之和，使用Promise.all可以实现并发请求,显著缩短加载时间。
async function loadDashboard() {
try {
const [userRes, orderRes] = await Promise.all([
fetch('/api/user'),
fetch('/api/orders')
]);
const user = await userRes.json();
const orders = await orderRes.json();
return { user, orders };
} catch (error) {
console.error('仪表盘数据加载失败:', error);
}
}
行业共识认为，对于独立且无依赖关系的请求，优先使用Promise.all，这不仅提升了用户体验,也减轻了服务器的排队压力。
常见错误与调试技巧
AJAX开发中，错误处理往往比正常流程更复杂，许多开发者忽略了对边界情况的处理,导致线上问题频发。
CORS跨域问题
浏览器出于安全考虑，默认禁止跨域请求，如果你在前端请求不同域名或端口的API，会遇到CORS（Cross-Origin Resource Sharing）错误，解决这个问题的方法不在前端，而在后端，后端服务器需要在响应头中添加
Access-Control-Allow-Origin字段,允许特定的域名访问。
超时与重试机制
网络环境不稳定时，请求可能会超时或失败，对于关键业务，实现重试机制是必要的，可以封装一个带有重试逻辑的请求函数,在失败后等待一段时间再重新发起请求。
async function fetchWithRetry(url, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url);
if (response.ok) return response;
} catch (error) {
if (i === retries - 1) throw error;
await new Promise(resolve => setTimeout(resolve, 1000 (i + 1)));
}
}
}
数据解析错误
确保后端返回的数据格式符合预期，如果后端返回了HTML而非JSON，response.json()会抛出语法错误，在开发环境中，开启浏览器的Network面板，仔细检查Response内容,是排查此类问题的最快方法。
AJAX写法常见问题解答
Fetch API和XMLHttpRequest有什么区别？
Fetch API基于Promise，语法更简洁，支持流式处理，且是原生API，无需引入第三方库，XMLHttpRequest基于回调，语法繁琐，但在IE浏览器中兼容性更好，现代开发中，除非需要支持IE，否则优先使用Fetch API。
如何处理AJAX请求中的错误？
使用try-catch包裹async/await代码，或使用.catch()处理Promise链中的错误，必须手动检查HTTP状态码,因为Fetch不会将4xx或5xx状态码视为错误。
AJAX请求可以取消吗？
XMLHttpRequest可以通过调用abort()方法取消请求，Fetch API本身没有直接取消的方法，但可以使用AbortController对象，创建一个AbortController实例，将它的signal属性传递给fetch，然后在需要取消时调用controller.abort()。
参考5掌握AJAX的正确写法，不仅能提升页面性能，还能优化用户体验，从XHR到Fetch，再到Async/Await，技术的演进始终围绕着简洁、高效和易维护展开，选择适合项目的技术栈，规范错误处理,是每一位前端开发者必须修习的基本功。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/334650.html
