如何在github源浏览中完成AJAX？

Question

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

例如,在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片段(#)来实现深层链接,但显然并非如此.

Answer 1

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

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

Doc说:

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

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

Answer 2

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

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

然后我想到了，为什么不问代码本身呢？

使用 Chrome（实际上是任何具有不错的开发工具的浏览器），打开存储库（在本例中为 pAjax），右键单击任何目录，只需选择检查元素即可。

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

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

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

旧且不正确的答案

GitHub 使用 jQuery 插件pJax（pushState + Ajax），该插件使用 HTML5 历史记录 API。