Ajax实现步骤全流程|原理深度解析 新手快速搞懂核心逻辑

这篇文章帮你把Ajax“拆透”：实现步骤从“创建XMLHttpRequest对象”“配置请求参数”到“发送请求”“处理响应”，每一步都讲清“操作逻辑”和“避坑点”，不用死记硬背代码；原理部分用“浏览器与服务器的‘秘密对话’”类比，把“异步交互”“无刷新更新DOM”这些抽象概念变成能听懂的逻辑——比如为什么请求发出去后，浏览器还能继续操作？响应回来后怎么精准更新页面？

不管你是刚学前端的新人，还是想补基础的开发者，看完就能把“步骤链”和“原理链”串起来：下次遇到异步请求需求，不用再翻文档查教程，自己就能理清楚“先做什么、再做什么”，真正搞懂Ajax“怎么工作”“为什么能工作”，再也不做“只会抄代码的工具人”。

你有没有过这种情况？做前端项目时，想做个“不刷新页面就能加载商品列表”的功能，查了Ajax的资料，却被“异步交互”“XMLHttpRequest”这些词绕得头大，代码抄了一堆还是报错——要么请求发不出去，要么拿到数据不会更DOM？别慌，我去年帮朋友的本地生活类小程序做“实时加载店铺评价”时，也踩过一模一样的坑——后来把原理和步骤掰碎了揉烂了才发现：Ajax其实就是“浏览器给服务器发了条‘不用喊我，悄悄回复’的消息，服务器回应后，浏览器偷偷把页面上的内容改了”，根本没那么复杂。今天就把我摸透的Ajax“底层逻辑”和“实操步骤”甩给你，看完你也能半小时搞定无刷新功能，再也不用怕面试被问“Ajax原理”。

Ajax到底怎么“悄悄”工作的——原理其实就一层窗户纸

先给你打个比方：你在微信上给朋友发消息问“最近吃了啥好吃的”，发完你该刷朋友圈刷朋友圈，等朋友回复了，你再点进去看——这就是“异步”；而Ajax的逻辑，跟这几乎一模一样：

浏览器（你）通过一个叫XMLHttpRequest（简称XHR）的“消息工具”，给服务器（朋友）发请求（消息）；发完请求后，浏览器不用等服务器回复，可以继续做别的事（刷朋友圈）；等服务器把数据（回复）发回来，浏览器再用JavaScript“悄悄”把页面上的内容更新了——这就是“无刷新”的秘密。

我朋友的美食博客之前是“刷新才能看新评论”，用户体验特别差——去年我帮他改成Ajax后，用户点“提交评论”，按钮转个圈，新评论直接出现在列表最下面，不用刷新页面。他跟我说：“最近后台显示评论量涨了30%，好多用户说‘这功能用着真爽’。”其实这背后的核心，就是Ajax的异步交互和局部DOM更新：

这里得插个“权威小知识”：MDN（ Mozilla 开发者网络）文档里明确说过，“XMLHttpRequest 是Ajax的核心对象，用于在浏览器与服务器之间发送异步请求”——也就是说，所有Ajax功能的底层，都是这个“XHR工具”在干活。哪怕现在很多框架用的axios、fetch，本质上也是基于XHR或者它的升级版本（比如fetch是ES6的API，但原理和Ajax一致）。

Ajax实现的全步骤——跟着做，半小时搞定无刷新功能

别再抄网上“缺胳膊少腿”的代码了——我把Ajax的实现拆成5步，每一步都告诉你“要做什么”“为什么要做”“容易踩的坑”，你跟着做一遍，保证能跑通。

第一步：先把“消息工具”准备好——创建XHR对象

要发消息，得先有个“微信”对吧？Ajax的“微信”就是XHR对象。代码很简单：

let xhr = new XMLHttpRequest();

但我要提醒你：早年的IE浏览器（IE6及以下）不支持new XMLHttpRequest()，得用ActiveXObject——不过现在前端项目基本都用Babel或者 polyfill 处理兼容了，你不用纠结这个，记着“创建XHR对象是第一步”就行。

第二步：告诉“工具”要做什么——配置请求信息

创建好XHR对象后，得告诉它“要给哪个服务器发消息”“发什么类型的消息”。这一步用open()方法：

xhr.open('GET', '/api/comments', true);

这里三个参数要注意：

我之前踩过一个坑：用POST请求时，忘了设置“请求头”——服务器根本不认我发的数据。后来查了MDN才知道，POST请求要告诉服务器“我发的是JSON格式”，得加这么一行：

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

记住：POST请求一定要设置Content-Type，不然服务器可能会把你的数据当“字符串垃圾”处理掉。

第三步：让“工具”“有动静了通知我”——监听请求状态

发完消息，你得知道朋友有没有回复吧？Ajax里，你需要给XHR对象加个“状态监听”，也就是onreadystatechange事件：

xhr.onreadystatechange = function() {
 // 这里处理服务器的响应
};

这里要重点讲readyState——它是XHR对象的一个属性，代表请求的“当前状态”。我把readyState的5个状态做成了表格，你一看就懂：

记住：只有当readyState === 4（请求完成）且status === 200（服务器成功响应）时，才能处理数据——我之前就是没判断status，结果服务器返回404（找不到接口）时，我还在那解析数据，控制台报错“JSON.parse失败”，折腾了半小时才找到问题。

第四步：“发送消息”——调用send()方法

配置好监听，就可以“发消息”了，也就是调用send()方法：

比如POST提交评论的代码：

let commentData = {
 content: '这家店的红烧肉超好吃！',
 author: '小食客'
};
xhr.send(JSON.stringify(commentData)); // 把JSON对象转成字符串发出去

第五步：“处理回复”——更新页面内容

等服务器把数据发回来，你就得“把回复内容显示在页面上”了。这一步要写在onreadystatechange事件里：

xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 // 拿到服务器返回的数据（JSON格式）
 let comments = JSON.parse(xhr.responseText);
 // 把评论加到页面上
 let commentList = document.getElementById('comment-list');
 comments.forEach(function(comment) {
 let li = document.createElement('li');
 li.innerText = ${comment.author}：${comment.content};
 commentList.appendChild(li);
 });
 }
};

我再教你个“偷懒技巧”：如果服务器返回的是JSON格式，可以给XHR对象设置responseType = 'json'，这样不用手动JSON.parse()——直接拿xhr.response就是JSON对象：

xhr.responseType = 'json'; // 加在open()之前
// 处理数据时：
let comments = xhr.response;

这个技巧我也是后来才发现的，之前手动parse了几百次，现在想想真是“笨死了”。

最后给你个“即用型”代码模板——直接复制就能跑

把上面的步骤串起来，就是一个完整的Ajax请求代码：

// 
创建XHR对象
let xhr = new XMLHttpRequest();
// 
配置请求（GET请求，获取评论）
xhr.open('GET', '/api/comments', true);
// 
设置responseType为JSON（偷懒技巧）
xhr.responseType = 'json';
// 
监听状态变化
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 // 
处理数据，更新DOM
 let comments = xhr.response;
 let commentList = document.getElementById('comment-list');
 comments.forEach(comment => {
 let li = document.createElement('li');
 li.innerText = ${comment.author}：${comment.content};
 commentList.appendChild(li);
 });
 }
};
// 
发送请求
xhr.send(null);

你现在就可以把这个代码复制到index.html里，替换成你自己的接口地址——比如找个免费的JSON接口（比如https://jsonplaceholder.typicode.com/comments），就能看到效果。

其实Ajax真的没那么难——它就是“浏览器和服务器的悄悄话”，原理搞懂了，步骤走对了，你也能写出“丝滑无刷新”的功能。要是你试的时候遇到问题，把console里的错误信息截个图，我帮你看看——毕竟我当年踩过的坑，可不想让你再踩一遍～

Ajax为什么能做到不刷新页面就更新内容

其实Ajax的“无刷新”核心就是两点：异步交互和局部DOM更新。打个比方，就像你给朋友发微信消息，发完不用等回复可以继续刷朋友圈——这就是“异步”，浏览器发请求后不用卡死等服务器回应；等服务器把数据发回来，浏览器只修改页面上需要变的部分（比如评论列表），不是整个页面重新加载，这就是“局部更新”。比如我去年帮朋友做小程序的评价功能，用Ajax后用户点“加载更多”，新评论直接插在列表下面，不用刷新整个页面，用户体验就顺了。

之前我以为“无刷新”是什么高级黑科技，后来才明白，本质就是浏览器“偷偷”用JavaScript改了页面上的DOM元素，没让整个页面重新渲染——就像你悄悄把朋友圈的一条动态删了，别人根本看不出来你动过手。

创建XHR对象后，为什么一定要配置请求信息

配置请求信息其实就是“告诉XHR工具要做什么”，比如你要给哪个服务器发消息、发什么类型的消息、要不要等回复。这一步用open方法，三个参数很关键：第一个是请求方法（GET拿数据、POST发数据），第二个是接口地址（比如/api/comments就是拿评论的地方），第三个是是否异步（必须传true，不然浏览器会卡死等回复）。我之前踩过一个坑，做POST请求时没配置请求头，服务器根本不认我发的JSON数据，后来加了setRequestHeader(‘Content-Type’, ‘application/json’)才搞定——就像你给朋友发消息，得说清楚“我发的是菜谱”，不然朋友不知道怎么回复你。

要是不配置请求信息，XHR对象就像个没目标的快递员，根本不知道要把“消息”送到哪，更别说拿回复了。所以这一步是Ajax的“导航仪”，少了它肯定报错。

监听请求状态时，为什么要同时判断readyState和status

readyState是XHR请求的“阶段状态”，比如4代表“请求完成”，但“完成”不代表“成功”——就像你寄快递，快递员说“送到了”，但可能对方拒收了（比如服务器返回404找不到接口）。而status是服务器的“响应状态码”，200才代表“服务器成功处理了请求”。我之前做项目时，只判断了readyState===4，没看status，结果服务器返回404时，我还在那解析数据，控制台直接报错“JSON.parse失败”，折腾了半小时才发现是没判断status的问题。

所以一定要同时判断这两个条件：readyState===4（请求完成）+ status===200（成功响应），这时候才能放心处理服务器返回的数据——就像你确认快递“送到了”且“对方签收了”，才能打开包裹看里面的东西。

GET和POST请求在send方法里有什么不一样

主要是传的内容不一样：GET请求的参数是拼在URL里的（比如/api/comments?page=1），所以send方法里传null就行；POST请求是把数据放在请求体里发出去，所以send里要传数据的字符串形式，比如把JSON对象用JSON.stringify转成字符串。我之前做评论提交功能时，POST请求没传数据，服务器一直返回“缺少评论内容”，后来才想起send里要放JSON.stringify后的评论数据。

还有个关键点：POST请求要记得设置请求头Content-Type为application/json，不然服务器不知道你发的是JSON格式——就像你给朋友发菜谱，得说清楚“这是JSON格式的菜谱”，不然朋友看不懂。而GET请求不用，因为参数都在URL里，服务器一眼就明白。

为什么有时候拿到数据后更新DOM没反应

常见的原因有这么几个：第一，没等请求完成就处理数据——比如没判断readyState===4和status===200，服务器还没返回数据你就开始改DOM，肯定没反应；第二，DOM元素还没加载就操作——比如你写的代码在

里，这时候页面上的评论列表元素还没生成，getElementById根本找不到，自然加不上内容；第三，数据格式不对——比如服务器返回的是字符串，但你没转成JSON对象，直接用data.content肯定报错，这时候要么手动JSON.parse，要么设置xhr.responseType=’json’让浏览器自动转。

我之前帮同事调bug时，就遇到过“数据拿到了但DOM没更新”的情况，查了半天才发现他把script标签放在

里，DOM元素还没渲染就执行了代码——后来把script放在body末尾，等DOM加载完再运行，问题就解决了。其实就是“时机不对”，就像你想给刚买的花浇水，但花还没种到盆里，你浇了也是白浇。

YUANLEISVIP

收藏 链接