前言

回顾我们之前所有的博客开发，文章列表、侧边栏数据、轮播文案全部都是前端本地写死的静态数据。

但真实互联网网站，从来不会把数据写死在代码里：

• 博客文章由后台发布，前端自动拉取展示

• 浏览量、评论数实时从服务器更新

• 无需修改前端代码，后台改数据，页面自动同步变化

实现前端和服务器数据互通，核心技术就是 AJAX。

本篇零基础吃透原生AJAX，不讲晦涩理论，全程结合我们的个人博客项目，实现从线上接口动态加载文章列表，彻底告别本地硬编码数据，真正实现前后端数据交互。

一、什么是AJAX？一句话通俗理解

AJAX = 无需刷新整个页面，异步向服务器发送请求、获取数据，局部更新网页内容。

日常上网随处可见AJAX：

• 刷抖音下滑加载更多视频，页面不刷新

• 网站点赞后数字实时变化，无需刷新网页

• 搜索框输入关键词实时联想提示

结合上篇同步异步知识点：AJAX属于异步网络请求，不会阻塞页面其他代码执行，也是前端三大异步核心（定时器、DOM事件、AJAX）最后一块拼图。

二、原生AJAX请求四步固定流程（新手直接背模板）

原生AJAX发送请求，永远遵循固定四步，不管调用什么接口，逻辑完全一致：

1. 创建XMLHttpRequest请求对象

2. 配置请求方式、请求地址、是否异步

3. 监听请求状态变化，接收服务器返回的数据

4. 发送网络请求

基础原生AJAX GET请求完整代码

// 1. 创建请求对象 const xhr = new XMLHttpRequest(); // 2. 配置请求：请求方式GET，接口地址，true代表异步请求 xhr.open('GET','https://jsonplaceholder.typicode.com/posts',true); // 3. 监听请求状态，拿到返回数据 xhr.onreadystatechange = function(){ // readyState=4：请求完成；status=200：请求成功 if(xhr.readyState === 4 && xhr.status === 200){ // 服务器返回的原始JSON字符串 console.log(xhr.responseText); // 转为JS数组/对象，前端可直接使用 const res = JSON.parse(xhr.responseText); } } // 4. 发送请求 xhr.send();

三、关键参数通俗讲解（新手不用死记硬背）

1. readyState 请求状态码

• 0：请求未初始化

• 1：请求已经建立，还没发送

• 2：请求已发送，响应头已接收

• 3：正在接收服务器返回数据

• 4：请求全部完成，可以使用数据

2. status 网络状态码

• 200：请求成功，数据正常返回

• 404：接口地址不存在

• 500：服务器后台代码报错

• 403：权限不足，禁止访问

3. 必懂转换：JSON <-> JS数据

服务器只会返回JSON字符串，前端无法直接遍历使用，必须转换：

• JSON.parse()：JSON字符串 → JS对象/数组（接口返回必用）

• JSON.stringify()：JS对象/数组 → JSON字符串（发送数据必用）

四、博客项目实战：AJAX动态加载文章列表

删掉我们之前本地写死的articleData数组，完全通过线上公共接口获取文章数据，自动渲染博客文章卡片。

完整实战代码（直接替换原有渲染逻辑）

document.addEventListener('DOMContentLoaded',function(){ const articleList = document.querySelector('.article-list'); // 页面加载自动发送AJAX请求，拉取文章数据 function getArticleData(){ const xhr = new XMLHttpRequest(); // 免费公共文章接口，无需后端，直接可用 xhr.open('GET','https://jsonplaceholder.typicode.com/posts',true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ // 解析后端返回数据 const articleArr = JSON.parse(xhr.responseText); // 只取前6条文章，适配博客页面展示 const showData = articleArr.slice(0,6); // 调用之前封装好的渲染函数渲染页面 renderList(showData,'.article-list'); } } // 发送请求 xhr.send(); } // 页面初始化调用 getArticleData(); })

升级后项目优势

1. 前端零本地数据，数据全部由服务器提供

2. 后续更换接口地址，即可一键更换全部文章，无需改动前端页面结构

3. 贴合真实开发流程，完全复刻企业前端页面加载逻辑

五、新手AJAX高频坑点+解决方案

• 坑1：拿到数据后直接在请求外使用，变量为空：AJAX是异步请求，外部代码会先执行，必须在onreadystatechange回调函数内部使用返回数据

• 坑2：忘记转换JSON格式：直接操作responseText会报错，一定要用JSON.parse解析

• 坑3：跨域报错：本地打开html文件调用线上接口会出现跨域，使用VSCode的Live Server插件打开页面即可解决

• 坑4：同步请求阻塞页面：永远不要使用false同步请求，会卡死整个网页

六、本篇结语

学完原生AJAX，我们正式打通前端与服务器的数据通道。

你的博客网站从纯本地静态页面，升级为可以联网获取远程数据的动态网站，彻底贴近真实线上项目。

但原生AJAX代码冗余、写法繁琐，现代前端几乎不会手写原生AJAX。下一篇我们学习更简洁的fetch请求，同时实现博客加载动画、请求失败兜底提示，完善网络请求交互体验。