github源码浏览中AJAX是怎么做的?

IT技术 javascript ajax dom github deep-linking
2021-02-22 18:48:50

Github 有一个非常好的源浏览器。在 repo 中的不同路径之间导航会生成 ajax 调用以加载内容(正如您在萤火虫日志中可以清楚地看到的那样)。ajax 调用返回要显示的新文件列表的 html。除了更改文件的视图列表之外,url 也会更改。然而,它不像大多数 ajax 深层链接站点那样使用片段(使用 #)。在 github 上,整个 url 都发生了变化。

例如,在https://github.com/django/django 的django repo 中,转到django文件夹将生成 ajax 请求,https://github.com/django/django/tree/master/django?slide=1&_=1327709883334请求将返回文件夹的 html 内容。该链接也将更改为https://github.com/django/django/tree/master/django正如您所看到的,这个新链接没有使用片段。

这是怎么做的?我一直认为基于 ajax 的站点必须使用 url 片段 (#) 来实现深层链接,但显然并非如此。

2个回答

您必须使用HTML5 的 pushState() 方法来更改浏览器历史记录。

window.history.pushState(data, "Title", "/new-url");

Doc 说:

pushState() 接受三个参数:一个状态对象、一个标题(当前被忽略)和(可选)一个 URL。

最后一个参数是新的 URL。出于安全原因,您只能更改 URL 的路径,而不能更改域本身。第二个参数是对新状态的描述。第一个参数是一些您可能希望与状态一起存储的数据。

好吧,正如Dav在评论中所描述的,GitHub 似乎不使用 pAjax 库。由于我最终回答了一个“不正确”的信息(实际上我认为我在回答这个问题时看到了与使用 pAjax 的 GitHub 相关的东西,但目前我找不到来源),我去了正确答案。

我没有找到开发人员关于是否使用任何库的任何官方信息,只找到了一个帖子说使用了History API:https : //github.com/blog/760-the-tree-slider

然后想到了,为什么不问代码本身呢?

使用 Chrome(实际上是任何具有良好开发工具的浏览器),打开一个存储库(在本例中为 pAjax),右键单击任何目录,只需选择检查元素。

检查元素

这将显示a负责目录链接元素。

HTML 结构

出现了一个“可疑”类,让我们在页面的 javascript 源代码中搜索它。

代码!

这里是目录链接的单击事件处理程序,以及与动画和 History Api 相关的整个代码。可以注意到,它没有使用 History Api 背后的任何库。不要忘记标记漂亮的打印选项。


旧的和不正确的答案

GitHub 使用 jQuery 插件pJax (pushState + Ajax),它使用 HTML5 历史 API。

惊人的。pushstate api 对我来说是纯粹的启示。谢谢
2021-05-06 18:48:50
嗯,Joshua Peek评论说 Github 树浏览器实际上并没有使用 pJax,因为插件中目前没有足够的功能来促进 Github 上看到的平滑过渡。
2021-05-13 18:48:50