什么是 AJAX 与 JSON？初学者的入门指南
在现代网页开发中，我们几乎每天都在和“数据”打交道。但你有没有想过，网页是如何在不刷新的情况下，动态获取新数据的？比如你打开一个社交平台，点一下“加载更多”，新内容就出现了，页面却没重新加载。这背后的核心技术，就是 AJAX 与 JSON 的组合。
AJAX（Asynchronous JavaScript and XML）并不是一种语言，而是一种编程技术。它的核心思想是“异步通信”——也就是让网页在后台悄悄地向服务器请求数据，而用户在前台还能继续操作页面，完全不会感觉到卡顿。
听起来像魔法？其实没那么复杂。你可以把 AJAX 想象成一个“快递员”：你不需要亲自去仓库取货，而是发个消息说“我要一份包裹”，快递员会自动帮你把东西送过来，你只需要在收到后处理它就行。
而 JSON（JavaScript Object Notation）则是这个“包裹”里的内容格式。它是一种轻量级的数据交换格式，比 XML 更简洁，也更符合 JavaScript 的语法习惯。你可以把它理解成一份“结构清晰的便签”——用键值对的方式记录信息，比如 { "name": "小明", "age": 18 }。
当 AJAX 把 JSON 数据从服务器“取回来”后，JavaScript 就能轻松解析它，并更新页面内容。这就是现代网页“无刷新加载”的底层逻辑。
AJAX 的基本语法与工作流程
我们先来看一个最基础的 AJAX 实例。这里以原生 JavaScript 为例，展示如何发起一个异步请求。
// 创建 XMLHttpRequest 对象，这是 AJAX 的核心
const xhr = new XMLHttpRequest();
// 设置请求方式（GET）和目标地址
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
// 监听请求状态变化
xhr.onreadystatechange = function () {
// 当请求状态变为 4（完成）且 HTTP 状态码为 200（成功）时
if (xhr.readyState === 4 && xhr.status === 200) {
// 将返回的 JSON 字符串转换为 JavaScript 对象
const data = JSON.parse(xhr.responseText);
// 输出数据到控制台，方便调试
console.log('获取到的数据：', data);
// 在页面上显示标题
document.getElementById('title').innerHTML = data.title;
}
};
// 发送请求
xhr.send();
代码注释说明：
new XMLHttpRequest()：创建一个异步请求对象，就像准备一辆快递车。open(method, url)：设置请求方法（GET/POST）和目标地址。这里我们请求的是一个公开的测试 API。onreadystatechange：监听请求的每一个阶段（0 到 4），其中 4 表示请求完成。xhr.readyState === 4：表示请求已经完成。xhr.status === 200：表示服务器返回成功（HTTP 200）。JSON.parse()：把从服务器返回的 JSON 字符串转成 JavaScript 可用的对象。send()：真正发送请求。
这个例子虽然简短，但涵盖了 AJAX 的完整流程：创建 → 配置 → 发送 → 处理响应。
用 fetch API 优化 AJAX 写法
虽然 XMLHttpRequest 是 AJAX 的原始实现，但现代浏览器推荐使用 fetch API，它更简洁、更现代，且支持 Promise。
// 使用 fetch 发起 GET 请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
// 检查响应是否成功
if (!response.ok) {
throw new Error('网络响应失败');
}
// 将响应体解析为 JSON
return response.json();
})
.then(data => {
// 成功获取数据后，更新页面
document.getElementById('title').textContent = data.title;
document.getElementById('body').textContent = data.body;
console.log('数据已成功加载：', data);
})
.catch(error => {
// 捕获错误并输出
console.error('请求出错：', error);
});
代码注释说明：
fetch(url)：返回一个 Promise，代表异步操作。.then(response => ...)：处理响应对象。response.ok是布尔值，表示是否成功（2xx 状态码）。response.json()：将响应体解析为 JSON 对象，这个方法本身也返回一个 Promise。.then(data => ...)：当 JSON 解析成功后，执行后续逻辑。.catch(error => ...)：捕获任何阶段的错误，比如网络中断、服务器返回 404 等。
相比 XMLHttpRequest，fetch 的写法更清晰，链式调用避免了“回调地狱”，是当前推荐的方式。
从 JSON 数据中提取信息：实战案例
我们来做一个真实的小项目：从一个公开的 API 获取用户列表，并显示在页面上。
假设我们使用这个 API：https://jsonplaceholder.typicode.com/users
这是一个返回 10 个用户信息的 JSON 数组，每个用户包含 id、name、email 等字段。
// 获取用户列表
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => {
// 获取页面中用于显示列表的容器
const userList = document.getElementById('user-list');
// 遍历用户数组，为每个用户生成一个列表项
users.forEach(user => {
const li = document.createElement('li');
li.innerHTML = `
<strong>${user.name}</strong> -
<span>${user.email}</span> -
<em>${user.phone}</em>
`;
userList.appendChild(li);
});
})
.catch(err => {
console.error('加载用户列表失败：', err);
});
HTML 结构（需要配合使用）：
<ul id="user-list"></ul>
代码注释说明：
users.forEach(...)：遍历 JSON 返回的数组，每个user是一个对象。document.createElement('li')：创建一个列表项元素。li.innerHTML：设置内部 HTML，使用模板字符串插入数据。user.name、user.email等：从 JSON 对象中提取字段。userList.appendChild(li)：将生成的列表项添加到页面中。
这个例子展示了如何将 AJAX 获取的 JSON 数据“渲染”成网页内容，是实际项目中最常见的用法。
处理复杂 JSON 结构：嵌套对象与数组
真实的 API 数据往往比例子复杂。比如一个博客系统，返回的 JSON 中可能包含文章、评论、作者等嵌套结构。
以如下结构为例：
{
"post": {
"id": 1,
"title": "AJAX JSON 实例详解",
"author": {
"name": "张工",
"email": "zhang@company.com"
},
"comments": [
{ "text": "讲得真清楚！", "author": "小李" },
{ "text": "收藏了！", "author": "小王" }
]
}
}
我们来读取这个嵌套结构：
fetch('https://example.com/api/post/1')
.then(response => response.json())
.then(data => {
const post = data.post;
// 提取文章标题
document.getElementById('post-title').textContent = post.title;
// 提取作者信息
const author = post.author;
document.getElementById('author-name').textContent = author.name;
document.getElementById('author-email').textContent = author.email;
// 遍历评论列表
const commentsContainer = document.getElementById('comments');
post.comments.forEach(comment => {
const p = document.createElement('p');
p.innerHTML = `<strong>${comment.author}</strong>: ${comment.text}`;
commentsContainer.appendChild(p);
});
})
.catch(err => {
console.error('获取文章失败：', err);
});
关键点总结：
- JSON 中的嵌套对象，通过
data.post.author逐层访问。 - 数组通过
.forEach()遍历。 - 每个字段的访问路径必须与 JSON 结构一致，否则会报错。
这就像拆一个礼物盒：一层一层打开，直到找到你想要的东西。
常见问题与调试技巧
在使用 AJAX JSON 实例时，新手常遇到几个问题：
1. 404 错误：URL 写错
确保 API 地址正确，尤其是大小写和路径。比如 users 和 Users 是不同的。
2. CORS 错误：跨域限制
浏览器出于安全考虑，会阻止跨域请求。解决方法：
- 使用代理服务器（如 Vite、Webpack 的 devServer.proxy）
- 或者使用支持 CORS 的测试 API（如 jsonplaceholder.typicode.com）
3. JSON 格式错误：返回不是合法 JSON
服务器返回 HTML 或错误页面时，JSON.parse() 会报错。建议在 .then(response => response.json()) 外加一层判断。
4. 控制台调试建议
- 使用
console.log(response)查看原始响应。 - 使用
console.error(err)捕获异常。 - 在浏览器开发者工具的 Network 面板中，查看请求是否成功、返回内容是什么。
总结：从“请求数据”到“动态更新”全流程
通过本文的多个 AJAX JSON 实例，我们一步步掌握了：
- 如何使用原生
XMLHttpRequest和现代fetch发起请求； - 如何解析服务器返回的 JSON 数据；
- 如何将数据动态渲染到页面；
- 如何处理嵌套结构与常见错误。
这些技能是前端开发的基石。无论你是做个人博客、后台管理系统，还是开发复杂 SPA（单页应用），AJAX JSON 实例都是你必须掌握的核心能力。
记住，每一次页面的“无刷新加载”，背后都是 AJAX 与 JSON 的默契配合。多动手写几个实例，你就能真正理解“异步”和“数据驱动”的魅力。
现在，就从一个 fetch 请求开始，尝试获取你感兴趣的 API 数据吧。