别再死记硬背！AJAX+JSON 一篇讲透：前端异步通信的神仙组合
|
admin
2026年3月21日 22:14
本文热度 35
|
AJAX 到底是个啥？
先给你一句人话翻译：AJAX = 页面不刷新，偷偷跟服务器要数据。
AJAX 全称是：Asynchronous JavaScript And XML。
直译：异步的 JavaScript 和 XML。
它是一种创建交互式网页应用的网页开发技术。
简单来说，AJAX是一种用于创建快速动态网页的技术，可以使开发者只向服务器获取数据。
需要注意的是，AJAX是让开发者向服务器获取数据，而不是图片、HTML文档等。
但你记住一句话就行：AJAX 不是新语言，不是新框架，就是一套“偷偷发请求”的套路。
2005 年被 Jesse James Garrett 正式命名， 从此网页从“每次点一下就刷新到怀疑人生”， 变成了“边刷边用、丝滑流畅”。
简而言之，AJAX是使用XMLHttpRequest对象与服务器端通信的脚本语言，可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。
一、传统网页 VS AJAX：一个像卡顿，一个像丝滑
1、传统 Web 交互（老古董模式）
缺点：
2、AJAX 交互（现代模式）
这就是为什么：
二、AJAX 核心优势
一句话总结：AJAX = 网页的“静音摸鱼式通信”。
三、JSON：AJAX 的“官方翻译官”
以前 AJAX 里的 X = XML， 但 XML 太啰嗦，现在基本被JSON 取代。
1、JSON 是什么？
人话：JSON = 跨语言都能看懂的字符串格式。
前端 JS 对象 <====> JSON字符串 <====> 后端语言对象。
它的特点：
2、JS 里两个封神方法
JSON.stringify(对象) ===> 转 JSON 字符串。JSON.parse(JSON字符串) ===> 转回 JS 对象。
3、原生 AJAX 案例：
最原生 AJAX 请求（GET）案例：
<!DOCTYPE html>
<html>
<body>
<button onclick="getData()">点我获取数据</button>
<div id="result"></div>
<script>
// 点击按钮触发请求
function getData() {
// 1. 创建 AJAX 核心对象
const xhr = new XMLHttpRequest();
// 2. 配置请求：方式、地址、是否异步（true=异步）
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 3. 发送请求
xhr.send();
// 4. 监听请求状态变化
xhr.onreadystatechange = function () {
// readyState === 4 表示请求完成
// status === 200 表示成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印原始数据
console.log(xhr.responseText);
// 把 JSON 字符串 → 转成 JS 对象
const data = JSON.parse(xhr.responseText);
// 把数据渲染到页面
document.getElementById('result').innerHTML =
'任务ID：' + data.id + '<br>' +
'任务内容：' + data.title;
}
};
}
</script>
</body>
</html>
解释说明：
new XMLHttpRequest()：创建 AJAX 特工。onreadystatechange：特工回来汇报结果。JSON.parse()：把翻译官（JSON）转成 JS 能懂的对象。
JSON 转换实战 案例：
// 1. 定义一个 JS 对象（前端常用）
const user = {
name: "前端小哥",
age: 24,
skill: ["AJAX", "JSON", "Vue"]
};
// 2. 对象 → JSON字符串（发给后端必须这样）
const jsonStr = JSON.stringify(user);
console.log("发给后端：", jsonStr);
// 3. JSON字符串 → 转回对象（前端接收后这样用）
const jsonObj = JSON.parse(jsonStr);
console.log("前端使用：", jsonObj.name);
解释说明
JSON.stringify()函数：把对象“打包成快递字符串”。JSON.parse()函数：把快递“拆包成可用对象”。
总结
- 核心流程：创建 xhr → open → send → 监听 → 解析 JSON → 渲染页面。
以前的网页：点一下，刷新一下。现在的网页：AJAX 偷偷干活，用户只管爽。JSON 负责翻译，前后端从此不打架。
阅读原文：原文链接
该文章在 2026/3/23 12:00:32 编辑过
400 186 1886
