SEO 百科

AJAX 与 fetch

本页目录

AJAX 与 fetch

AJAX 是一种在页面里向服务器异步请求数据、只更新页面局部内容的技术[1]。做 SEO 的人要关注它，因为由它填进去的内容不在原始 HTML 里。爬虫要等脚本把这些请求发完，才可能看到正文。

AJAX 与 fetch 的分工

AJAX 说的是一种做法，不是某个接口。它最早的实现用的是 XMLHttpRequest[1]。这个接口由浏览器提供，能在页面不刷新的情况下收发数据。

现在更常用的是 fetch()。MDN 说明，Fetch API 提供了获取资源的接口，是 XMLHttpRequest 的一个更强大、更灵活的替代[2]。它返回一个 Promise。Promise 表示一个还没有结果、将来会有的值。服务器返回响应头以后，这个值就兑现成 Response 对象[2]。

一次典型的取数写成这样：

fetch("/api/products")
  .then((response) => response.json())
  .then((products) => {
    document.querySelector("#list").innerHTML = render(products);
  });

第一行发出请求，中间的 json() 把响应正文解析成数据，最后一行把数据渲染进页面。

接口取回内容的链路

这条链路里，正文不在服务器返回的 HTML 里，而在第二个请求的响应里。渲染服务得先执行脚本，脚本再发请求，响应回来之后才写进页面。

请求失败，后果很直接。接口超时、跨域被拒，或者返回错误，内容就填不进页面。爬虫看到的仍是空容器。

Google 说明，Googlebot 会分辨哪些资源对基本网页内容没有贡献，并且可能不抓取它们[4]。纯统计上报和错误上报的请求，通常不在抓取范围内。

渲染队列与超时

凡是返回 200 状态码的网页，Googlebot 都会加进渲染队列[3]。排队和执行都要时间，脚本里的接口请求还得在这段时间里跑完。渲染服务不会无限等，脚本没跑完就取不到内容。

渲染还有一处限制，就是不保留页面状态。Google 说明，在网页加载过程中，系统会清除本地存储空间和会话存储空间中的数据，也会清除 HTTP Cookie[4]。本地存储指浏览器留给站点存放数据的地方。把内容藏在这些数据后面，例如先读缓存再渲染，爬虫那一遍就会落空。

接口只能走 HTTP。Googlebot 用 HTTP 请求取回内容，不支持 WebSockets 这类连接[4]。WebSockets 用一条长连接把浏览器和服务器连起来。由它推送正文，爬虫取不到。

内容进入渲染后 HTML 的办法

要让内容稳稳进索引，最终仍要落到 HTML 上。几条可行的做法：

  1. 服务端渲染，服务器直接返回带正文的 HTML；
  2. 预渲染，构建时把页面生成成静态文件；
  3. 关键内容写进初始 HTML，脚本只做增强。

Google 建议采用服务端渲染或预渲染，理由是用户和抓取工具能更快看到内容，以及并非所有漫游器都能运行 JavaScript[3]。

接口这一段也要有备选。Google 建议提供用于检索内容的 HTTP 回退机制[4]。意思是不依赖脚本，同一个网址用普通请求也能拿到内容。

与抓取和收录的关系

抓取是收录的第一步。百度把搜索的工作原理概括为从互联网抓取网页、建立索引数据库、再将索引库中的数据展现给用户[5]。AJAX 取回的内容要等到渲染阶段才写进 DOM，抓取阶段读不到。

过大的脚本还会把这条链路拉长。2024 Web Almanac 的统计显示，页面 JavaScript 体积的中位数在移动端达到 558 千字节[6]。

自己核对时，打开 Search Console 的网址检查工具，看渲染后的 HTML 里有没有那段内容。查不到，就是接口还没跑完，或者根本没跑。

常见误用

  • 正文全部由接口填充，初始 HTML 里只有空容器。
  • 数据先存进本地存储或 Cookie，渲染时再读。
  • 用 WebSocket 推送正文。
  • 接口没有超时和降级，一次失败整页空白。

附录

参见

参考资料

官方（境外）

  1. 《AJAX》，MDN Web 文档，2025-10-10 更新。
  2. 《Fetch API》，MDN Web 文档，2026-04-17 更新。
  3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。
  4. 《解决与 Google 搜索相关的 JavaScript 问题》，Google 搜索中心，2025-12-18 更新。

官方（国内）

  1. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

  1. 《JavaScript》，2024 Web Almanac，HTTP Archive，2025-03-03 发布。

外部链接

无。