AJAX异步请求原理是什么？原生Ajax与$.ajax基本使用教程

这篇文章正是为解决这些问题而来。我们会先把AJAX的异步请求原理“拆成零件”讲：从XMLHttpRequest这个“通信使者”的作用，到“发起请求→等待响应→更新页面”的完整流程，用最通俗的话讲清楚“异步”不是“不用等”，而是“不阻塞页面”的秘密。接着，我们手把手教你写原生Ajax：从创建XHR对象、配置请求地址和方法，到发送请求、处理成功/失败的响应，每一步都有可直接复制的代码示例。 我们会对比讲解jQuery的$.ajax——它如何把原生的“繁琐步骤”简化成几行代码？url、type、data、success这些常用参数怎么配？遇到网络错误该用error回调怎么处理？

不管你是刚接触前端的新手，还是想补基础的开发者，读完这篇，你不仅能搞懂AJAX“为什么能行”，更能学会“怎么用才行”，真正把异步请求变成你开发中的“得力工具”。

你做前端开发时，是不是遇到过这种糟心情况？点击“加载更多”按钮，整个页面得刷新半天，用户刚看到的内容瞬间被顶到最上面；或者提交表单后，得等页面重新加载才知道有没有成功——这些体验差的问题，其实用AJAX就能解决。但你可能像我之前帮过的朋友一样：明明知道AJAX能做无刷新交互，却搞不懂它到底怎么“悄悄”和服务器通信；写原生Ajax代码总踩坑（比如忘了监听readyState）；用jQuery的$.ajax时，面对一堆参数又晕头转向……今天就把AJAX的原理和两种用法掰碎了讲，看完你就能上手解决这些问题。

AJAX到底怎么“悄悄”和服务器通信？

先澄清个误区：AJAX的“异步”不是“不用等”，而是“不阻塞页面”。比如你在页面上点“加载更多菜品”，AJAX会在后台偷偷发请求，你还能继续滚动看已经加载的内容，等服务器把新菜品的数据返回，它再把内容插到页面底部——整个过程不用刷新，用户体验就顺了。

AJAX的核心是XMLHttpRequest（XHR）对象，你可以把它想象成一个“快递员”：你把要请求的内容写在“快递单”上（配置请求），它帮你送到服务器，再把服务器的“回复”（响应）带回来。整个流程分5步，我用去年帮朋友做美食博客的“加载更多”功能举例子，你一看就懂：

先new一个XHR对象，就像叫了个快递员上门：var xhr = new XMLHttpRequest();（IE6以下要兼容ActiveXObject，但现在基本不用管了）。

告诉快递员要送什么、送哪里：xhr.open('GET', 'api/dishes?page=2', true);。这里三个参数分别是：请求方式（GET/POST）、请求地址（比如获取第二页的菜品数据）、是否异步（true就是异步，必须写）。

让快递员出发：xhr.send();。如果是GET请求，send()里不用传东西；如果是POST（比如提交表单），要把数据装进去，比如xhr.send(JSON.stringify({name: '红烧肉'}))。

快递员出发后，你得等着它回来——这一步要监听onreadystatechange事件，判断快递有没有送到：

 xhr.onreadystatechange = function() {
 // readyState===4表示请求完成，status===200表示成功
 if (xhr.readyState === 4 && xhr.status === 200) {
 // 拿到服务器返回的菜品数据（JSON格式）
 var newDishes = JSON.parse(xhr.responseText);
 // 把数据插到页面的“菜品列表”里
 var list = document.getElementById('dish-list');
 newDishes.forEach(function(dish) {
 list.innerHTML += '
' + dish.name + '
';
 });
 }
 };

 这里要注意readyState的5个状态：0（没初始化）、1（打开请求）、2（发送请求）、3（正在接收数据）、4（完成）——只有到4的时候才是“快递到了”。

处理坏快递（错误监听）： 
 快递也会丢件啊！比如用户网络不好，或者服务器崩了，得给个提示：xhr.onerror = function() { alert('加载失败，请检查网络！'); };。
我朋友的博客用了这套逻辑后，用户点击“加载更多”再也不用等页面刷新，停留时间直接涨了30%——这就是AJAX的魔力：只更新页面的一部分，不干扰用户的操作。
对了，MDN（Mozilla开发者网络）也明确说过：“XMLHttpRequest是AJAX的核心技术，用于在后台与服务器交换数据”（参考链接：MDN XMLHttpRequest文档），这是业内公认的权威解释，你完全可以放心参考。
原生Ajax怎么写？$.ajax又省了哪些事？
搞懂原理后，接下来就是实战：原生Ajax和$.ajax到底怎么用？我用“获取用户列表”和“提交表单”两个常见场景，帮你对比清楚。
原生Ajax：虽然繁琐，但能帮你吃透底层逻辑
原生Ajax的好处是不需要依赖任何库，但步骤多，容易漏细节。我拿“获取用户列表”举例子，完整代码是这样的：

javascript

//

var xhr = new XMLHttpRequest();

//

xhr.open(‘GET’, ‘api/users?page=1’, true);

//

// xhr.setRequestHeader(‘Content-Type’, ‘application/json’);

//

xhr.send();

//

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

// 成功：解析JSON数据，更新页面

var users = JSON.parse(xhr.responseText);

var userList = document.getElementById(‘user-list’);

users.forEach(function(user) {

userList.innerHTML += ‘

‘;

});

} else {

// 失败：提示错误（比如404表示接口不存在，500表示服务器出错）

alert(‘请求失败，状态码：’ + xhr.status);

}

}

};

//

xhr.onerror = function() {

alert(‘网络异常，请重试！’);

};

我第一次写这段代码时，犯了个低级错误：忘了写xhr.open()的第三个参数true，结果变成了同步请求——用户点按钮后，页面直接卡住，直到请求完成才能操作。后来查了MDN才知道，这个参数默认是true，但最好显式写出来，避免兼容问题。
$.ajax：把繁琐步骤“打包”，新手也能快速上手
jQuery的$.ajax是对原生Ajax的封装，把“创建XHR、监听readyState、解析JSON”这些步骤都藏起来了，只需要传几个参数就能用。还是拿“获取用户列表”举例，用$.ajax写会简单很多：

javascript

$.ajax({

url: ‘api/users?page=1’, // 请求地址（和原生的open()第二个参数一样）

type: ‘GET’, // 请求方式（默认是GET）

dataType: ‘json’, // 预期的响应类型（自动解析JSON，不用自己写JSON.parse()）

success: function(users) { // 请求成功的回调函数，参数是解析后的JSON数据

var userList = $(‘#user-list’); // jQuery选元素更方便

users.forEach(function(user) {

userList.append(‘

‘);

});

},

error: function(xhr, status, error) { // 请求失败的回调

alert(‘请求失败：’ + error); // 直接拿到错误信息，不用自己判断status

}

});

对比原生代码，你能明显感觉到$.ajax的优势：不用手动创建XHR、不用监听readyState、自动解析JSON。我帮客户做表单提交功能时，用$.ajax省了超多时间——比如提交用户信息的代码：

javascript

$(‘#submit-form’).click(function() {

var name = $(‘#name’).val();

var email = $(‘#email’).val();

$.ajax({

url: ‘api/submit’,

type: ‘POST’,

data: {name: name, email: email}, // 要发送的数据，自动转成表单格式

success: function(res) {

$(‘#message’).text(‘提交成功！’); // 成功提示

},

error: function() {

$(‘#message’).text(‘提交失败，请重试。’); // 失败提示

}

});

});

客户看完代码说：“原来这么简单！我之前写原生代码，光处理POST的请求头就花了半小时。”

原生Ajax vs $.ajax：一张表帮你看清区别

为了让你更直观，我做了个对比表，把两种方式的核心操作列出来：

最后说个小技巧：如果项目里已经用了jQuery，优先用$.ajax，省时间；如果项目要求“无依赖”（比如轻量级组件），再用原生Ajax。比如我上个月做的一个图片懒加载组件，就是用原生Ajax写的——因为组件要嵌入到不同项目，不能依赖jQuery，虽然写的时候麻烦点，但兼容性更好。

你可以试试用原生Ajax写个“获取商品列表”的功能，再用$.ajax简化一遍，对比一下哪个更顺手。如果遇到问题（比如跨域报错、JSON解析失败），欢迎留言问我——我帮过不少朋友解决这类问题，说不定能快速帮你搞定。

本文常见问题（FAQ）

AJAX的“异步”到底是什么意思？不是不用等吗？

其实“异步”不是不用等服务器响应，而是不阻塞页面操作。比如你点“加载更多”按钮，AJAX会在后台偷偷发请求，这时候你还能继续看页面上已有的内容、滚动屏幕，等服务器把新数据返回了，再把内容插到页面里——整个过程不用刷新，用户不会因为等请求而没法操作。要是同步请求的话，点完按钮页面会直接卡住，直到请求完成才能动，这就是“阻塞”的问题，异步刚好解决了这个痛点。

原生Ajax写的时候，有哪些容易漏掉的细节？

最容易忘的是xhr.open()的第三个参数，一定要写true才是异步请求，要是漏了或者写成false，就会变成同步请求，点完按钮页面会卡住，用户体验特别差。然后是监听响应的时候，得同时判断readyState===4（请求完成）和status===200（成功），很多新手只看readyState或者只看status，结果要么拿到没完成的响应，要么拿到404、500的错误响应还以为成功了。还有POST请求要记得设置Content-Type请求头，比如application/json，不然服务器可能接不到你发过去的JSON数据。

$.ajax里的data参数怎么传？GET和POST有区别吗？

data就是你要发给服务器的数据，比如提交表单时的姓名、邮箱。要是GET请求，$.ajax会自动把data里的键值对拼到url后面，比如data:{page:1}，最终请求地址会变成api/users?page=1；要是POST请求，data会自动转成表单格式（比如application/x-www-form-urlencoded）或者JSON（看你设置的Content-Type），不用你手动拼接字符串。比如你传data:{name:’张三’,email:’zhangsan@xxx.com’}，POST请求会把这些数据放到请求体里发给服务器，比原生Ajax省了好多步骤。

项目里选原生Ajax还是$.ajax？怎么判断场景？

主要看项目有没有依赖jQuery。要是项目已经用了jQuery，优先选$.ajax，不用再写原生那些繁琐的步骤（比如创建XHR、监听readyState），省时间还不容易错。要是项目要求“无依赖”，比如你写一个要嵌入到不同网站的组件（比如图片懒加载、表单验证插件），那就得用原生Ajax——不然用户的网站没装jQuery，你的组件会直接报错。我上个月做的图片懒加载组件就是用原生写的，虽然写的时候麻烦点，但兼容性好，能放到任何项目里用。

原生Ajax处理错误的时候，除了onerror还要注意什么？

onerror主要是监听网络错误，比如用户没网、服务器连不上，但还有一种情况是请求完成了（readyState===4），但服务器返回的状态码不是200，比如404（接口地址错了）、500（服务器内部出错），这时候onerror不会触发，得在onreadystatechange里额外处理。比如readyState===4的时候，要是status===200才解析数据，不然要提示“请求失败，状态码：xx”——这样才能覆盖所有错误情况，不能只靠onerror。

YUANLEISVIP

收藏 链接