作为一名前端开发者，我们每天都和Ajax打交道。但你真的理解它的工作原理吗？今天我将带你从基础开始，用原生JavaScript + Node.js实现一个完整的待办事项应用。彻底搞懂前后端交互的每一个环节。

传统的网页交互是这样的：使用者点击链接 → 浏览器向服务器请求完整页面 → 服务器返回新页面 → 页面刷新。不过，这种体验有多糟糕，很多人都深有体会。

Ajax的出现明显改变了这一局面。它让可以在不刷新页面的情况下向服务器请求数据并更新部分页面内容。

主要原理图解

写在前面

一、为什么需要Ajax？

二、数据交换的桥梁：JSON

在网络传输中，需要一种通用格式来传递数据。JSON就是这个标准，

JSON.stringify 详解

// 基本用法const todo = { id:。title: '学习Ajax',completed: false };const jsonStr = JSON.stringify;// 输出: '{"id":,"title":"学习Ajax"。"completed":false}'// 带格式化参数的用法const prettyJson = JSON.stringify;// 输出:// {// "id":,// "title": "学习Ajax",// "completed": false// }

• value :要转换的对象
• replacer :过滤函数。null 表示但是滤
• space :缩进空格数，可提高可读性

三、服务端搭建：Node.js + HTTP模块

CommonJS模块化程序

// 引入Node内置的http模块const http = require;// 待办数据const todos =;
// 创建HTTP服务器const server = http.createServer => { // 根据请求方法返回不同内容 if { res.end;} if { // 解决跨域问题 res.setHeader;// 设置响应头：告诉浏览器返回的是JSON格式 res.setHeader;// 将对象转为字符串并返回 res.end);}})，// 监听3千端口server.listen => { console.log;})，

关键技术点

四、前端请求：从XHR到Fetch

事页 charset="UTF-"> 喜欢父：（META）《》（〉

喜欢 ul  i：todos /i：>

javascript

const btn = document.getElementById const todosList = document.getElementById btn.addEventListener {

const xhr = new XMLHttpRequest

xhr.open

xhr.onreadystatechange = function { console.log if { const todos= JSON.parse todosList.innerHTML=todos.map(todo => ).join } } xhr.send }) console.log