7. AJAX 基础

这是什么：AJAX = Asynchronous JavaScript And XML 的缩写，意思是「异步 JavaScript 和 XML」，也就是不刷新整个网页也能和服务器交换数据。

为什么用：没有它，页面上任何一点数据变化都得整页重载，用户只能对着白屏干等。搜索框自动弹出联想词、点「加载更多」追加内容，靠的都是它。

如何用：本章用 jQuery 的 .load()、$.get()、$.post() 三个方法上手，先从服务器加载一段 HTML 片段。

现在数据格式大多用 JSON 而不是 XML，但 AJAX 这个名字依旧沿用了下来。

7.1 jQuery 中的 AJAX

jQuery 对原生 XMLHttpRequest 进行了封装，提供了简单易用的 AJAX 方法。最常用的有三个：

注意：load() 是jQuery 对象方法（$(selector).load()），而 $.get()、$.post() 是全局方法（直接用 $ 调用）。

7.2 方法 1：.load() —— 加载 HTML 片段

.load() 是最简单的 AJAX 方法，可以直接把服务器返回的 HTML 内容加载到指定元素里。

语法：

$(selector).load(url, [data], [callback]);

• url：请求的地址（必需）
• data：可选，发送到服务器的数据（对象形式）
• callback：可选，请求完成后的回调函数

示例：加载外部 HTML 文件

假设有一个文件 content.html，内容如下：

<!-- content.html -->
<h3>这是从服务器加载的内容</h3>
<p>使用 .load() 方法，无刷新加载成功！</p>

在主页面中：

<div id="result">加载中...</div>
<button id="loadBtn">加载内容</button>

<script>
  $(function () {
    $('#loadBtn').click(function () {
      $('#result').load('content.html');
    });
  });
</script>

点击按钮后，#result 的内容就会被替换成 content.html 里的 HTML。

注意：这个示例需要在本地服务器环境（如 python -m http.server、Live Server、Nginx 等）中运行。如果直接用 file:// 打开，部分浏览器会限制 AJAX 请求。

7.3 方法 2：$.get() —— GET 请求

$.get() 用于向服务器发送 GET 请求，通常用于获取数据（不会修改服务器数据）。

语法：

$.get(url, [data], [success], [dataType]);

• url：请求地址
• data：可选，随请求一起发送的参数（对象形式，会自动拼接到 URL 后面）
• success：可选，请求成功时的回调函数，参数是服务器返回的数据
• dataType：可选，预期服务器返回的数据类型（'json'、'html'、'text' 等）

示例：获取 JSON 数据

假设服务器返回 JSON 数据（示例用一个模拟接口说明思路）：

$(function () {
  $('#getBtn').click(function () {
    $.get('https://jsonplaceholder.typicode.com/posts/1', function (data) {
      // data 是服务器返回的 JSON 对象
      $('#title').text(data.title);
      $('#body').text(data.body);
    }, 'json');
  });
});

参数传递（GET 查询参数）

$.get('api/user.php', { id: 1, name: 'frog' }, function (data) {
  console.log(data);
});

jQuery 会自动把 { id: 1, name: 'frog' } 转换成 api/user.php?id=1&name=frog.

7.4 方法 3：$.post() —— POST 请求

$.post() 用于发送 POST 请求，适合提交表单数据、创建资源等需要向服务器发送数据的场景。

语法：

$.post(url, [data], [success], [dataType]);

参数和 $.get() 基本一致，只是请求方法不同。

示例：提交数据

$(function () {
  $('#submitBtn').click(function () {
    $.post(
      'api/login.php',
      {
        username: $('#username').val(),
        password: $('#password').val()
      },
      function (res) {
        // res 是服务器返回的结果
        if (res.success) {
          $('#tip').text('登录成功！').css('color', 'green');
        } else {
          $('#tip').text('登录失败：' + res.msg).css('color', 'red');
        }
      },
      'json'
    );
  });
});

GET vs POST 区别（简单回顾）

7.5 通用 AJAX 方法：$.ajax()（进阶）

如果需要更精细的控制（设置请求头、错误处理、超时等），jQuery 还提供了 $.ajax() 方法。

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/posts/1', // 公共免费测试 API
  type: 'GET', // 或 'POST'
  dataType: 'json',
  data: { page: 1 },
  success: function (data) {
    console.log('成功：', data);
  },
  error: function (xhr, status, error) {
    console.error('请求失败：', error);
  },
  timeout: 5000 // 5 秒超时
});

日常入门阶段，掌握 load()、$.get()、$.post() 已经足够用了。

7.6 AJAX 注意事项

1. 同源策略限制：如果请求的 URL 和当前页面不是同一个域名、协议或端口，浏览器会阻止请求（跨域问题）。解决跨域常用 JSONP、CORS 等方式。
2. 需要服务器环境：用 file:// 协议打开本地 HTML 文件时，很多浏览器不允许 AJAX 请求。建议用本地开发服务器（python -m http.server、Live Server、http-server 等）。
3. 处理加载状态：实际项目中，建议在请求发送前显示「加载中...」，请求完成后隐藏，提升用户体验。
4. 错误处理：要考虑网络异常、服务器错误（404、500）等情况，给用户友好的提示。

7.7 小练习（思路）

不需要真实后端，我们可以用 JSONPlaceholder 这个免费在线 API 测试：

$.get('https://jsonplaceholder.typicode.com/users/1', function (user) {
  $('#name').text(user.name);
  $('#email').text(user.email);
  $('#website').text(user.website);
}, 'json');

这个接口非常适合练习 AJAX 请求。

7.8 小结

本章学习了 jQuery AJAX 的基础用法：

• .load()：最简单，适合加载 HTML 片段到页面指定位置
• $.get()：发送 GET 请求，用于获取数据
• $.post()：发送 POST 请求，用于提交数据
• AJAX 的核心价值是：不刷新页面，实现局部更新和数据交互

到这里，jQuery 的核心知识（选择器、DOM、事件、动画、AJAX）就基本讲完了。最后一章，我们来做一个综合练习：待办清单，把所学知识串起来练手。