5 分钟 JS 实战 - 为博客网站添加AJAX功能（第23节）

JavaScript 实战：为博客网站添加 AJAX 功能

引言

在现代 Web 开发中，AJAX（Asynchronous JavaScript and XML）是实现动态网页的核心技术之一。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信，从而提升用户体验。本文将带你深入理解 AJAX 的工作原理，并通过一个实际的博客网站案例，教你如何使用 JavaScript 和 JSON 实现异步加载数据的功能。

---

1. 什么是 AJAX？

AJAX 是一种在不重新加载整个网页的情况下，与服务器进行异步通信的技术。它的核心是通过 JavaScript 发送 HTTP 请求，并处理服务器返回的数据。AJAX 的典型应用场景包括：

• 动态加载文章列表
• 表单提交后的即时反馈
• 实时搜索建议

1.1 AJAX 的工作原理

AJAX 的工作流程可以分为以下几个步骤：

1. 用户触发事件：例如点击按钮或滚动页面。
2. JavaScript 发送请求：通过 XMLHttpRequest 或 fetch API 向服务器发送请求。
3. 服务器处理请求：服务器接收请求并返回数据（通常是 JSON 格式）。
4. JavaScript 处理响应：解析服务器返回的数据，并更新网页内容。

1.2 AJAX 的优势

特性	传统网页加载	AJAX
页面刷新	需要	不需要
用户体验	较差	流畅
数据传输量	较大	较小
开发复杂度	简单	较高

---

2. 为博客网站添加 AJAX 功能

接下来，我们将通过一个实际的案例，为上一篇中的博客网站添加 AJAX 功能，实现异步加载文章列表和文章详情。

2.1 项目目录结构

在开始之前，我们先设计项目的目录结构：

/blog-website
│
├── index.html          # 首页
├── post.html           # 文章详情页
├── styles              # 存放 CSS 文件
│   └── main.css        # 主样式文件
├── scripts             # 存放 JavaScript 文件
│   ├── main.js         # 首页的 JavaScript 文件
│   └── post.js         # 文章详情页的 JavaScript 文件
└── data                # 存放模拟的 JSON 数据
    ├── posts.json      # 文章列表数据
    └── post-1.json     # 文章 1 的详情数据

目录结构说明：

• index.html：首页，展示文章列表。
• post.html：文章详情页，展示单篇文章内容。
• styles/main.css：存放所有 CSS 样式。
• scripts/main.js：首页的 JavaScript 文件，用于加载文章列表。
• scripts/post.js：文章详情页的 JavaScript 文件，用于加载文章详情。
• data/posts.json：模拟的文章列表数据。
• data/post-1.json：模拟的文章 1 的详情数据。

---

2.2 实现异步加载文章列表

2.2.1 编写 JSON 数据

在 data/posts.json 文件中，我们定义文章列表数据：

[
    {
   
        "id": 1,
        "title": "文章标题 1",
        "summary": "这是文章 1 的简要内容...",
        "link": "post.html?id=1"
    },
    {
   
        "id": 2,
        "title": "文章标题 2",
        "summary": "这是文章 2 的简要内容...",
        "link": "post.html?id=2"
    }
]

2.2.2 使用 fetch API 加载数据

在 scripts/main.js 文件中，我们使用 fetch API 异步加载文章列表：

// 获取文章列表容器
const postList = document.querySelector("main");

// 使用 fetch 加载文章列表
fetch('data/posts.json') // 1. 发送请求
    .then(response => response.json()) // 2. 解析 JSON 数据
    .then(posts => {
   
        // 3. 动态生成文章列表
        posts.forEach(post => {
   
            const article = document.createElement("article");
            article.innerHTML = `
                <h2>${
     post.title}</h2>
                <p>${
     post.summary}</p>
                <a href="${
     post.link}