104、【Ubuntu】【Hugo】搭建私人博客：搜索功能（AJAX请求）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

上篇 blog
【【Ubuntu】【Hugo】搭建私人博客：搜索功能（四）

分析完了 search.html 剩余内容 <searchbox>，并开始分析 fastsearch.js 前端搜索脚本（初始化变量，加载搜索数据），下面继续分析

搭建私人博客

加载搜索数据

下面继续来看第二部分内容：加载搜索数据的实现，其整体结构如下

XMLHttpRequest()：创建 AJAX 请求
onreadystatechange：设置回调，当请求状态变化时执行
open，send：发起 GET 请求向服务器索取 index.json

AJAX

这里提到了 AJAX 请求，下面详细分析下，AJAX 全称 Asynchronous JavaScript and XML，但今天 AJAX 已经不局限于 XML，而是泛指在网页不刷新的情况下，用 JavaScript 向服务器请求数据，并更新页面部分内容的技术 ，其核心特点在于局部更新，无需跳转

在传统没有 AJAX 的网页中，如果点击搜索，浏览器会整个页面刷新，此时服务器会返回一个全新的 HTML 页面，此时看到的结果是，原来已经滚动到的位置丢失，或者正在播放的视频停掉了
而在使用 AJAX 的网页中，点击搜索或者输入关键词，JavaScript 在后台向服务器索要数据，服务器返回纯数据，JS 拿到数据后，只更新搜索结果区域，页面其他部分（比如导航栏，视频，表单等）完全不受影响，使网页或者 App 可以边用边加载，而不用反复跳转页面

这里涉及到的 XMLHttpRequest 是浏览器提供的一个内置对象，专门用来发起 AJAX 请求，虽然其名字里有 XML，但可以请求任何格式的数据，比如 JSON，HTML，文本，图片等，其基本用法大致分为以下四步

javascript 复制代码

// 1、创建对象
let xhr = new XMLHttpRequest();

// 2、配置请求（方法，如 GET、URL）
xhr.open('GET', '/api/data.json');

// 3、设置回调：当数据回来时做什么
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText); // 拿到服务器返回的内容
    }
};

// 4、发送请求！
xhr.send();

注意，这个过程是异步的，xhr.send() 执行完之后，代码不会在里面等待结果，而是继续往下执行，等到服务器响应到了，才执行 xhr.onload 里的内容

OK，可以看到 fastsearch.js 也是一个典型的 AJAX 请求，分为上面说的四步走，前端静态搜索不需要后端接口，直接读一个 JSON 文件就行，这也是动态网页开发的基础

这里可以看到，通过原生 XMLHttpRequest（XHR）对象发起一个 GET 请求，请求的 URL 是 ../index.json，其当前页面大致类似 myblog.com/search/index.html 这样，因为 index.json 一般放在网页根目录 myblog.com/index.json，由 Hugo 在构建时生成，这个搜索文件 index.json 一般结构如下

json 复制代码

[
  {
    "title": "如何安装 Ubuntu",
    "permalink": "/posts/install-ubuntu/",
    "summary": "本文介绍 Ubuntu 安装步骤...",
    "content": "完整文章内容..."
  },
  {
    "title": "SSH 隧道教程",
    "permalink": "/posts/ssh-tunnel/",
    "summary": "...",
    "content": "..."
  }
]

有 title 标题，permalink 链接，summary 摘要，content 正文内容等信息

OK，下面来看 xhr.onreadystatechange 监听请求状态变化

这里 readyState === 4 表示请求已完成（DONE），无论成功还是失败，其状态描述如下

xhr.status === 200 表示 HTTP 响应状态码为 200（OK），也就是成功获取到文件，常见返回值还有 404（表示 index.json 文件不存在），或者 500（服务器出错），注意，即使 status !== 200，也可能有 responseText 响应（比如 404 页面内容），所以这里用了 console.log 打印出来方便调试

另外，这里用了三个等号 === 来判断 xhr.readyState 和 xhr.status，=== 是 JavaScript 中的严格相等运算符，JavaScript 有两种相等比较

==：宽松相等，会自动转换类型再比较
===：严格相等，不会转换类型，值和类型都必须相同

举个例子

javascript 复制代码

console.log(200 == "200");   // true  → 字符串 "200" 被转成数字 200
console.log(200 === "200");  // false → 数字 ≠ 字符串，类型不同

console.log(0 == "");        // true  → 空字符串转成 0
console.log(0 === "");       // false

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：模糊搜索 Fuse.js（一）