第13课：小白进阶必看！AJAX与Fetch入门

不要小看自己，因为人有无限可能！

你是否好奇，网页是如何在不刷新的情况下加载新数据的？比如刷微博热搜榜、搜索时的自动补全提示？这一切都归功于 AJAX 技术！今天我们就学习网页请求数据，用 Fetch API 轻松获取服务器数据！

一、什么是 AJAX？

1. 快递员比喻

• 传统网页：点链接 → 整页刷新（像去店里取餐）
• AJAX 网页：JS 悄悄发请求 → 局部更新（像外卖小哥送餐到桌）

2. 核心原理

• Asynchronous JavaScript And XML（异步 JS 和 XML）
• 现在主要用 JSON 代替 XML

二、现代快递员：Fetch API

1. 基础使用四步曲

// 1. 告诉外卖员去哪取餐（URL）
fetch('https://api.example.com/data')
  // 2. 检查餐品是否完好（响应状态）
  .then(response => {
    if (!response.ok) throw new Error('餐撒了！');
    return response.json(); // 3. 拆包装（解析JSON）
  })
  // 4. 享用美食（使用数据）
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('取餐失败:', error); // 处理异常
  });

2. 发送带参数的请求

// 查询杭州天气
fetch('https://api.weather.com/current?city=杭州&key=YOUR_KEY')
  .then(res => res.json())
  .then(data => showWeather(data));

// POST请求（提交表单）
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: '小明',
    password: '123456'
  })
});

GET 和 POST 有什么区别？

下节预告

第 14 课：面向对象编程——用“乐高思维”组装代码

• 面向对象核心概念

• 构造函数与原型链

• Class 语法糖：更现代的写法

回复【JS】获取本课源码+工具包！