江湖传说，有一种功夫可以让页面不翻页就取来消息——像驿站飞鸽传书，人不动，信已到。 这一式，我们修炼 Ajax：页面不刷新，数据照样来。

本式要点
  • 用大白话理解 Ajax：不刷新整页，悄悄向服务器取数据
  • 会写 $.get / $.post 与 $.getJSON，认识 done / fail / always
  • 会写 $.ajax 完整配置，知道 load() 一句话塞内容
  • 记住：本章需要本地服务器，以及为什么其他章节不用
  • 会用 serialize() 打包表单，会写全局钩子（ajaxStart / ajaxComplete）

Ajax 是什么

传统的页面交互是“整页翻书”：点一下，整个页面重新加载一次。Ajax 是“递小纸条”： 页面留在原地，JavaScript 悄悄向服务器要一份数据，拿到后只更新需要更新的那一小块。 搜索框的联想词、瀑布流的新内容、表单提交后的小红字，都是它的手笔。

先说清楚：本章需要本地服务器

浏览器的安全策略不允许 file:// 页面读本地文件（否则任何网页都能偷看你的硬盘）， 所以双击打开本章时，下面的演示会失败——页面上会弹出提示框，那是 fail 在报信。 请用本地服务器打开本章：在项目根目录执行 python3 -m http.server 8899 --directory site， 然后访问 http://127.0.0.1:8899/jquery/09-ajax.html。 只有本章需要这么做，其他章节双击即开，不受影响。

$.get 与 $.post

两个最常用的快捷招式，各自对应一种“递纸条”的方向：$.get 去“拿”数据 （数据跟在网址后面），$.post 去“交”数据（数据放在请求的身体里）。

$.getJSON 读 JSON

JSON 是一种规规矩矩的数据格式——像一份字段整齐的花名册。本站的修行笔记就存成 JSON： site/data/notes.json，里面是 8 条笔记，每条都有 id、title、 content、level 四个字段。$.getJSON(网址, 回调) 一步到位：取来数据并自动解析成 JavaScript 对象。

它返回的请求对象还能继续链上三种结局处理：.done() 成功时执行、 .fail() 失败时执行、.always() 无论成败都执行。

例 1 · 按钮加载 ../data/notes.json 渲染成列表

    三种结局各就各位：done 渲染列表，fail 亮出“请用本地服务器打开本章”的提示框， always 收尾。试试用 file:// 双击打开本章再点按钮——你会亲眼看到 fail 的报信。

    例 2 · “加载中”转圈，done 后替换成结果

    还没开始加载。

    经典三段式：请求发出前摆出转圈（Bootstrap 的 spinner-border）， done 里把整个区域替换成结果，fail 里换上警告。

    $.ajax 完整配置

    $.get、$.post、$.getJSON 都是 $.ajax 的快捷招式， 内部都调用它。要更细的控制（请求方式、超时、请求头……），直接写 $.ajax：

    done / fail / always 与 success / error 是两种写法、同一件事，挑顺手的用；链式的 done/fail/always 更贴近 jQuery 的现代风格。

    表单与全局：serialize / getScript / 全局事件

    还有几件常和 Ajax 搭伴的工具，一并认识一下：

    方法用途
    $form.serialize()把表单里所有带 name 的控件拼成查询串（中文自动编码）
    $form.serializeArray()拼成 [{name, value}, …] 数组，方便自己加工
    $.getScript(网址, 回调)动态加载并执行一个 JS 文件（脚本需在本地或服务器上，file:// 下不可用）
    $.ajaxSetup({…})设置所有 Ajax 请求的默认值（超时、请求头等）——全局生效，慎用
    $(document).on('ajaxStart', fn)挂着全局钩子：任何一个请求开始 / 结束（ajaxComplete）、成功（ajaxSuccess）、失败（ajaxError）都能统一处理——做“全局加载提示”正合适
    例 3 · 表单序列化与全局事件
    点按钮试试；全局事件的动静也会记在这里。

    load() 一句话塞进元素

    最后是最偷懒的一招：$el.load(网址) 把服务器返回的 HTML 直接塞进元素。 网址后面加一个空格再加选择器，还能只取返回内容里的一段。

    例 4 · load() 的两种写法：最简 与 带回调

    这里将出现本章自己的章首语（load 来的）。

    load 适合加载现成的 HTML 片段；拿 JSON 数据还是 getJSON 顺手。 它也受本地服务器的限制——所以例 4 加载的是本章自己的一段内容，失败时同样会亮出提示。

    练功 · 第九式
    1. 给例 1 加一个状态行——无论成败，请求结束后都显示“本次请求已结束”（用 always()）。
    2. 把例 1 的 $.getJSON 改写成 $.ajax({…}) 完整写法（url / method / dataType / success / error 齐全）。
    3. 思考题：为什么 file:// 双击打开时 Ajax 读不了本地 JSON，而 <script src="…"> 引入脚本却可以？
    参考答案 1

    always 像“散场打扫”——不管成功还是失败都会执行， 适合恢复按钮状态、显示收尾提示这类活儿。

    参考答案 2

    两种写法效果相同：success/error 写在配置里， done/fail/always 链在返回的请求对象上。

    参考答案 3

    <script> 标签是浏览器网开一面的“历史通道”——跨域加载脚本自古放行； 而 Ajax 受同源策略约束：页面只能向“同一个源”要数据。 双击打开的 file:// 页面没有像样的“源”，浏览器一律拦下它对本地文件的 Ajax 请求， 防止网页偷读你的硬盘。本地服务器把页面和数据放进同一个源（http://127.0.0.1:8899）， Ajax 就名正言顺了。

    本式小结

    • Ajax 是不刷新整页、悄悄取数据的飞鸽传书；
    • $.get / $.post / $.getJSON 是 $.ajax 的快捷招式，done / fail / always 处理三种结局；
    • load() 把 HTML 片段直接塞进元素；
    • serialize() / serializeArray() 打包表单，getScript() 动态加载脚本；
    • 全局钩子（ajaxStart / ajaxComplete / ajaxError…）适合统一做加载提示；
    • 本章需要本地服务器：python3 -m http.server 8899 --directory site，其余章节不受影响。
    下一式，我们把 jQuery 与 Bootstrap 合璧，综合修炼一个待办清单。