jQuery 的 ajax 请求，就是 jQuery 对原生 XMLHttpRequest 做的封装，用来在页面不刷新的情况下，和后端服务器异步交互数据，支持 GET、POST 等请求方式，有简写方法 .post ()，还有最完整、功能最全的底层方法 $.ajax ()，现在新项目大多改用 fetch 或者 axios，但是老项目、老教材里面仍然大量使用 jQuery ajax，它最大优点是写法简洁，兼容旧浏览器，统一回调写法。
基础信息对照表
| 方法 | 特点 |
|---|---|
| $.ajax() | 核心底层方法，参数最全，可配置所有选项 |
| $.get() | 简写，专门 GET 请求 |
| $.post() | 简写，专门 POST 请求 |
| $.getJSON() | 简写，专门请求 JSON 数据 |
核心 $.ajax () 完整示例
$.ajax({
url: "api/test", // 请求地址
type: "POST", // 请求方式 GET / POST
data: { name: "tom", age: 18 }, // 提交参数
dataType: "json", // 预期返回数据类型
contentType: "application/json", // 请求头
success: function(res){
// 请求成功回调
console.log(res)
},
error: function(xhr){
// 请求失败回调
console.log("请求出错", xhr)
}
})
简写方法示例
// get简写
$.get("api/test", {id:1}, function(res){
console.log(res)
})
// post简写
$.post("api/test", {name:"jack"}, function(res){
console.log(res)
})
// getJSON
$.getJSON("api/data.json", function(res){
console.log(res)
})
深度补充要点
- 常用配置项
- async：是否异步，默认 true，改成 false 就是同步请求，同步会阻塞页面，不推荐使用
- headers：自定义请求头，携带 token
- timeout：超时时间，单位毫秒，超时触发 error
- beforeSend：请求发送之前执行，可以在这里添加 loading
- complete：请求完成（不管成功失败都会执行）
- 跨域问题
- 回调演变
jQuery ajax 同样受浏览器同源策略限制，跨域需要后端配置 CORS，或者使用 jsonp，注意 jsonp 只支持 GET 请求。
旧版 jQuery 是 success/error 回调，新版 jQuery 1.8 + 支持 Promise 链式写法：
$.ajax({url:"api/test"})
.done(function(res){})
.fail(function(err){})
.always(function(){})
- 优缺点
✅ 优点：兼容 IE 等老旧浏览器，配置简单，老项目维护方便
❌ 缺点：已经停止更新，原生 fetch、axios 更现代，不再推荐新项目使用
综合来看，jQuery ajax 核心掌握 $.ajax 完整参数，以及 get、post 简写，理解异步、跨域、success/error 回调机制即可。
【常见问题】
问题 1 jquery 的 ajax 请求 默认是异步还是同步
回答 1 jquery 的 ajax 请求默认 async:true，也就是异步请求，设置 async:false 才是同步，同步会阻塞页面渲染。
问题 2 jquery 的 ajax 请求 跨域可以用 jsonp 吗
回答 1 jquery 的 ajax 请求支持 jsonp 跨域，但是 jsonp 只支持 GET 请求，现代跨域优先后端 CORS 方案。
问题 3 jquery 的 ajax 请求 还推荐新项目使用吗
回答 1 jquery 的 ajax 请求已经不再推荐新项目，现在主流是 axios 或者原生 fetch，jQuery ajax 多用于旧项目维护。
【免责申明】
本内容仅为 jquery 的 ajax 请求相关前端技术科普，属于代码教学解析，不同 jQuery 版本 API 存在细微差异，请勿用于商业传播。
