彻底搞懂Ajax：异步请求原理+原生Ajax与$.ajax基本使用全解析

这篇文章会把Ajax“拆成零件讲”：先从原理入手，帮你搞懂“异步请求怎么发、响应怎么处理”的完整流程；接着手把手写原生Ajax代码——从创建XHR对象、配置请求方法/地址，到发送请求、处理成功/失败的响应；最后再讲$.ajax的用法——比如怎么用url「data「success这些参数快速实现功能，常见场景（如GET获取列表、POST提交表单）该怎么写。

不管你是刚接触前端的新手，还是想补基础的开发者，看完这篇都能彻底理清Ajax的逻辑——毕竟搞懂“为什么”，再复杂的“怎么用”也能举一反三，再也不怕遇到异步请求的问题。

你有没有过这种经历？写前端页面时，想让用户点“加载更多”按钮就刷出新内容，结果一操作整个页面都闪一下，用户吐槽“像卡带的DVD”；或者跟着教程写了原生Ajax，却总碰到“JSON解析失败”的报错，对着控制台翻半小时才发现“忘了加responseType: ‘json’”？其实这些麻烦，本质上都是没把Ajax的“底层逻辑”和“实际用法”打通——今天我就用自己做过的3个项目例子，把Ajax从原理到原生、jQuery的用法拆得明明白白，你看完就能直接上手解决异步请求的问题。

Ajax到底是怎么实现“不刷新页面”的？

要搞懂Ajax，得先弄明白“异步”和“同步”的区别——你可以把网页请求想象成“去奶茶店买喝的”：

同步请求就是“你站在柜台前等，店员做奶茶的时候你啥也干不了，只能盯着收银机发呆”；而Ajax的异步请求，就是“你点完单拿个号码牌，然后去旁边刷手机，奶茶做好了店员喊你取——整个过程你不用一直等着，还能做别的事”。

那Ajax是怎么做到“异步”的？核心就两个东西：XMLHttpRequest（XHR）对象和浏览器的异步处理机制。我去年帮一家本地餐饮小程序做“实时订单查询”功能时，就踩过“同步请求”的坑：当时用同步方式写，用户点“查订单”后，页面卡3秒才能加载出订单，老板说“像便秘一样”。后来改成Ajax异步请求，相当于给网页派了个“小快递员”（XHR对象）：

这个过程中，网页不用整个刷新，用户该翻菜单还能翻菜单，订单数据“悄悄”就加载好了——老板看到效果后，直接加了我500块奖金。其实MDN文档里早说过：“Ajax的本质是通过XHR对象实现浏览器与服务器的异步数据交换”，我踩过的坑，本质上就是没理解“异步”的核心逻辑。

原生Ajax怎么写？我踩过的坑你别再踩

很多人觉得“原生Ajax代码多”，但其实它是帮你“打通任督二脉”的关键——你搞懂了原生写法，再用jQuery的$.ajax就能“举一反三”。我做过的一个自媒体博客评论功能，就是用原生Ajax实现的，当时碰到3个坑，现在帮你避掉：

坑1：“跨域”报错怎么解决？

去年写博客评论功能时，我用本地HTML文件请求阿里云服务器的接口，结果控制台蹦出“Access-Control-Allow-Origin”错误——这是浏览器的“同源策略”在搞鬼（同源指协议、域名、端口都一样）。后来我查了MDN的文档，才知道解决办法有两个：

当时我让后端同学加了响应头，问题立刻解决——你要是碰到跨域，先检查服务器有没有开CORS，别先乱改前端代码。

坑2：怎么处理JSON数据？

我一开始用xhr.responseText拿到数据后，直接往页面里插，结果显示“[object Object]”——原来responseText是字符串，得用JSON.parse(xhr.responseText)转成JS对象才行。后来我学聪明了，提前加一句xhr.responseType = 'json'，这样xhr.response直接就是JSON对象，省了 parse 的步骤——这招我现在做项目还在用，能少写一行是一行。

坑3：怎么处理请求失败的情况？

以前我只写了onreadystatechange里的成功逻辑，结果有次服务器宕机，用户点“提交评论”没反应，以为是按钮坏了。后来我加了xhr.onerror事件，碰到网络错误时弹出“网络不太好，再试一下？”的提示——用户体验立刻好了很多。

其实原生Ajax的完整写法就像这样（我简化后的博客评论代码）：

// 
创建XHR对象
let xhr = new XMLHttpRequest();
// 
配置请求（POST方法，接口地址，异步）
xhr.open('POST', '/api/comments', true);
// 
设置请求头（发送JSON数据时需要）
xhr.setRequestHeader('Content-Type', 'application/json');
// 
设置响应类型为JSON（自动解析）
xhr.responseType = 'json';
// 
监听请求状态变化
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if (xhr.status === 200) {
 // 成功：把评论加到页面里
 let comment = xhr.response;
 document.getElementById('comments-list').innerHTML += 
${comment.content}
;

 } else {
 // 失败：提示用户
 alert('提交失败，再试一下？');
 }
 }
};
// 
发送数据（评论内容）
xhr.send(JSON.stringify({ content: '这篇文章写得真好！' }));

你看，其实步骤并不复杂——难的是你要搞懂每一步“为什么要这么写”，而不是“抄代码”。

用$.ajax偷懒？这些参数你得搞清楚

如果说原生Ajax是“手动挡汽车”（适合练技术），那jQuery的$.ajax就是“自动挡”（适合赶进度）——我做电商项目时，用$.ajax帮客户省了3天开发时间。但你别以为“抄个代码就行”，关键参数搞错了，一样掉坑里。

最常用的5个参数

我做电商购物车更新功能时，用$.ajax的POST请求发商品ID，结果一开始服务器收不到数据，后来查了文档才发现，是contentType参数没设对——现在把最常用的参数给你列出来：

当时我把contentType改成application/json，再用JSON.stringify(data)把数据转成字符串，服务器立刻收到了——你要是用POST发JSON，一定要记得这两步。

原生Ajax vs $.ajax：该选哪个？

我做项目时，会根据情况选：

为了让你更清楚，我做了个对比表格：

比如你做一个“商品详情页的库存查询”功能，用$.ajax的写法会是这样：

$.ajax({
 url: '/api/product/stock',
 type: 'GET',
 data: { productId: 123 },
 dataType: 'json',
 success: function(data) {
 // 成功：更新库存显示
 $('#stock').text(库存：${data.stock}件);
 },
 error: function() {
 // 失败：提示用户
 alert('查询库存失败，请重试');
 }
});

是不是比原生简洁多了？我现在做项目，只要不用框架（比如Vue、React），都会优先用$.ajax——毕竟效率才是硬道理。

你有没有用过Ajax做过什么功能？碰到过“跨域”“JSON解析失败”之类的坑吗？欢迎在评论区告诉我，我帮你看看怎么解决！

Ajax为什么能实现“不刷新页面”获取数据？

其实核心是“异步”和“XMLHttpRequest（XHR）对象”在起作用。你可以把同步请求想象成“站在奶茶店柜台等奶茶，啥也干不了”，而Ajax异步请求就是“点完单拿号码牌去刷手机，奶茶好瞭店员喊你”——XHR对象就像那个“小快递员”，帮你发请求、拿响应，整个过程不用页面刷新。具体来说，先创建XHR对象，配置请求地址和方法（开异步开关），发数据后监听响应状态，等数据回来再更新页面，这样就不用整个页面重新加载瞭。

写原生Ajax时，常踩的坑有哪些？

我之前做项目踩过三个典型坑：第一个是跨域报错，本地文件请求服务器接口时，浏览器会因为“同源策略”拦下来，解决办法要么让服务器加Access-Control-Allow-Origin响应头，要么用JSONP（但只支持GET）；第二个是JSON解析失败，一开始直接用responseText插页面，结果显示“[object Object]”，后来加瞭responseType: ‘json’，让XHR自动解析成JSON对象就好瞭；第三个是没处理请求失败，之前只写瞭成功逻辑，服务器宕机时用户点按钮没反应，后来加瞭onerror事件，弹出“网络不太好，再试一下”的提示，体验就好瞭。

$.ajax里最常用的参数有哪些？

我做电商项目时常用的几个关键参数：第一个是url，要请求的接口地址，比如/api/cart/update；第二个是type，请求方法（GET/POST，默认GET）；第三个是data，要发送的数据，比如{productId: 123, quantity: 2}；第四个是contentType，发送数据的格式，发JSON得用application/json（默认是application/x-www-form-urlencoded）；第五个是dataType，期望的响应格式，比如json，jQuery会自动把响应转成JS对象。还有success（请求成功回调）和error（失败回调），比如成功后更新购物车数量，失败弹出提示。

原生Ajax和$.ajax该怎么选？

得看你的使用场景。如果想深入理解Ajax原理（比如面试复习），或者需要更灵活的控制，就用原生Ajax——虽然代码多，但能搞懂每一步逻辑；如果是赶项目进度（比如客户要明天上线），就用$.ajax，它封装瞭XHR对象，代码更简洁，还自动兼容浏览器（不用手动处理IE兼容）。我现在做项目，只要不用框架，都会优先用$.ajax，效率更高。

用Ajax时碰到跨域报错，该怎么解决？

跨域是浏览器“同源策略”导致的（协议、域名、端口有一个不一样就拦）。解决办法有两个：第一个是让服务器端加Access-Control-Allow-Origin: 响应头，这样浏览器就允许跨域请求瞭，适合你能控制服务器的情况；第二个是用JSONP，但它只支持GET请求，适合老项目或者没法改服务器的情况。我之前帮餐饮小程序做订单查询时，就是让后端加瞭响应头，问题立刻解决瞭。

YUANLEISVIP

收藏 链接