文章目录
- JSON.stringify(value,replace?,space?)
-
- 方法参数详解
- 核心作用
- JS 异步处理
-
- 执行原理
- JS 异步方案演进（Ajax 配套使用）
-
- 1. 回调函数 callback
- 2. Promise + then()
- 3. async/await（最优方案）
- 模块化补充说明
- 实战案例：Node 服务端 + 原生 Ajax(XHR) 完整演示
-
- 一、Node 服务端代码（server.js）
-
- 服务端代码关键解析
- 二、前端页面代码（index.html）
-
- 前端代码关键解析
- 全文总结
- 核心知识点复盘
- 常见问题/避坑指南
JSON.stringify(value,replace?,space?)
在前后端网络传输场景中，JavaScript 对象、数组无法直接通过网络发送，需要先转换成标准的 JSON 格式字符串，JSON.stringify 就是实现数据序列化的核心方法。
方法参数详解
语法：JSON.stringify(value, replace?, space?)
- 传 null：不对原数据做任何处理，原样完成序列化；
- 传数组：仅保留数组内指定的字段，过滤多余属性；
- 传函数：可自定义处理每一组键值对，实现数据脱敏、字段修改等逻辑。
- 传入数字（1~10）：代表缩进空格数量，开发环境常用 2 / 4 个空格格式化；
- 省略/不传：输出单行压缩字符串，体积更小，适合生产环境网络传输。
核心作用
专门将 JS 对象、数组转为 JSON 字符串，适配 HTTP 网络传输规则，是 Ajax 前后端传参、返回数据的必备操作。
JS 异步处理
JavaScript 是单线程语言，同一时刻只会执行一段同步代码。为了避免网络请求、定时器、事件等耗时操作阻塞主线程、造成页面卡死，JS 引入了事件循环（Event Loop） 机制管理异步任务。
执行原理
JS 异步方案演进（Ajax 配套使用）
1. 回调函数 callback
最早的异步实现方式，原生 XHR、定时器均基于回调函数实现。
- 优点：浏览器原生支持，上手简单；
- 缺点：多层异步嵌套会形成回调地狱，代码可读性、可维护性极差。
2. Promise + then()
ES6 推出的异步解决方案，专门用来封装异步任务，通过 then() 链式调用替代多层嵌套。
- 优点：解决回调地狱，代码结构扁平化，支持统一异常捕获；
- 缺点：本质依旧是回调写法，复杂场景下链式调用依然繁琐。
3. async/await（最优方案）
基于 Promise 封装的语法糖，是目前前端最推荐、综合表现最优的异步方案。
- 优势：代码写法和同步代码完全一致，逻辑直观清晰，错误处理简单，企业级项目主流用法。
模块化补充说明
早期前端没有统一模块化规范，依靠全局函数实现功能拆分；Node.js 诞生后率先落地模块化体系：
- CommonJS：Node 早期标准，使用 require 导入模块、module.exports 导出模块；
- ESM：ES6 推出的新标准，使用 import / export default，是目前前后端通用的主流模块化方案。
实战案例：Node 服务端 + 原生 Ajax(XHR) 完整演示
一、Node 服务端代码（server.js）
使用 Node 内置 http 模块搭建简易接口服务，无需安装第三方依赖。
// 导入node内置的http 模块（CommonJS模块化规范）
const http = require("http");
// 创建HTTP服务
http.createServer((req,res)=>{
// 定义接口返回的模拟数据
const todos = [{
id:1,
title:"过四六级",
completed:false
},
{
id:2,
title:"回家过节",
completed:false
}]
// 匹配首页路由
if(req.url === "/"){
res.end("hello world");
}
// 匹配todos数据接口路由
if(req.url === "/todos"){
// 设置跨域响应头，允许前端跨域请求（本地测试使用）
res.setHeader("Access-Control-Allow-Origin","*");
// 声明响应数据类型为JSON
res.setHeader("Content-Type","application/json");
// 二进制文本 JSON序列化：对象转字符串，响应给前端
res.end(JSON.stringify(todos));
}
// 监听3000端口，启动服务
}).listen(3000,()=>{
console.log("server is running on 3000 port");
})
服务端代码关键解析
二、前端页面代码（index.html）
使用原生 XMLHttpRequest（Ajax 底层原生 API）发起请求，获取后端数据并动态渲染页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="todos"></ul>
<button id="btn">按钮</button>
<script>
console.log("start");
// 事件的注册（异步事件）
document.getElementById("btn").addEventListener("click",function(){
console.log("点击按钮");
})
// fetch 的前辈：原生XMLHttpRequest，Ajax底层实现
// 底层本质是JS主动发起HTTP接口请求，实现页面无刷新更新，也是WEB 2.0 核心能力
const xhr = new XMLHttpRequest();
// 打开一个http 通道：请求方式、接口地址、是否异步(true=异步)
xhr.open("GET","http://localhost:3000/todos",true);
console.log("start");
// 回调函数 callback：监听请求状态变化
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
// 状态码200=请求成功，readyState=4=请求全部完成
if(xhr.status === 200 && xhr.readyState === 4){
// json字符串转换为数组对象（反序列化）
const todos = JSON.parse(xhr.responseText);
// 动态拼接HTML，渲染到页面
document.getElementById("todos").innerHTML =
todos.map(todo=>`<li>${todo.title}</li>`).join("");
}
}
console.log("end");
// 发送请求
xhr.send();
</script>
</body>
</html>
前端代码关键解析
全文总结
核心知识点复盘
常见问题/避坑指南
数据渲染失败 原因：未做序列化/反序列化，直接操作原始字符串。 解决：服务端必须使用 JSON.stringify，前端接收数据后必须使用 JSON.parse。
请求阻塞页面 原因：xhr.open 第三个参数设为 false，开启了同步请求。 解决：固定使用 true 开启异步请求，避免主线程阻塞。
跨域请求报错 原因：服务端未配置跨域响应头。 解决：本地测试添加 Access-Control-Allow-Origin: *，线上环境禁止使用通配符，指定合法域名。
状态判断不严谨 原因：只判断 readyState === 4，忽略 status === 200。 解决：两个条件必须同时判断，区分「请求完成」和「请求成功」。
传输体积过大 原因：生产环境依旧使用 space 参数添加缩进格式化。 解决：仅开发环境开启缩进，生产环境移除 space 参数，使用压缩字符串减少请求体积。
