github源码浏览中AJAX是如何完成的？
Github 有一个非常好的源代码浏览器。在存储库中的不同路径之间导航会生成 ajax 调用来加载内容（正如您可以在 firebug 日志中清楚地看到的那样）。 ajax 调用返回要显示的新文件列表的 html。除了更改文件的查看列表之外，URL 也会更改。然而，它不像大多数 ajax 深层链接站点那样使用片段（使用 #）。在 github 上，整个 url 发生了变化。
例如，在 https://github.com/django/django 的 django 存储库中，转到 django 文件夹将生成对 https://github.com/django/django/tree/master/django?slide=1&_=1327709883334 的 ajax 请求，该请求将返回文件夹的 html 内容。该链接也将更改为 https://github.com/django/django/tree/master/django。正如您所看到的，这个新链接不使用片段。
这是怎么做到的？我一直认为基于 ajax 的网站必须使用 url 片段 (#) 来实现深度链接，但显然事实并非如此。
Github has a really nice source browser. Navigating between different paths in the repo generates ajax calls to load the content (as you can clearly see in the firebug log). The ajax call returns the html of the new list of files to be displayed. In addition to changing the view list of files, the url changes as well. However it does not use fragments like most ajax deep-linked sites (use of #). At github the whole url changes.
For example at django repo at https://github.com/django/django going to django folder will generate ajax request to https://github.com/django/django/tree/master/django?slide=1&_=1327709883334 which will return the html content of the folder. The link will also change to https://github.com/django/django/tree/master/django. As you can see this new link does not use a fragment.
How is that done? I always thought that ajax based sites have to use url fragments (#) to achieve deep linking but apparently it is not so.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您必须使用HTML5的pushState()方法来更改浏览器历史记录。
医生说：
最后一个参数是新的 URL。出于安全原因，您只能更改 URL 的路径，而不能更改域本身。第二个参数是对新状态的描述。第一个参数是您可能想要与状态一起存储的一些数据。
You have to use HTML5's pushState() method to change browser history.
Doc says:
The last argument is the new URL. For security reasons you can only change the path of the URL, not the domain itself. The second argument is a description of the new state. And the first argument is some data that you might want to store along with the state.
好吧，正如 Dav 的评论中所述，GitHub 似乎不使用 pAjax 库。由于我最终回答了一个“不正确”的信息（实际上我认为我在回答这个问题时看到了一些与 GitHub 使用 pAjax 相关的东西，但目前我找不到来源），我追随正确答案。
我没有找到开发人员关于是否使用任何库的官方信息，只找到一篇文章说使用了 History API： https://github.com/blog/760-the-tree-slider
然后我就想到了，为什么不问代码本身呢？
使用 Chrome（实际上是任何具有不错的开发工具的浏览器），打开存储库（在本例中为 pAjax），右键单击任何目录，只需选择检查元素即可。
这将显示负责目录链接的
a元素。出现了一个“可疑”类，让我们在页面的 javascript 源代码中搜索它。
这是目录链接的单击事件处理程序，以及与动画相关的整个代码和历史API。值得注意的是，History Api 背后没有使用任何库。不要忘记标记“漂亮打印”选项。
旧的和不正确的答案
GitHub 使用 jQuery 插件 pJax (pushState + Ajax)，它使用 HTML5 历史 API。Well, as was described in the comments by Dav, it appears that GitHub does not use the pAjax library. Due to the fact that I ended up answering with an "incorrect" information (actually I think I had seen something related to GitHub using pAjax when I was answering this question, but at the moment I can not find the source), I went after the correct answer.
I did not find anything official on the part of developers regarding whether any library was used, only found a post saying that the History API was used: https://github.com/blog/760-the-tree-slider
Then came to my head, why not ask the code itself?
Using Chrome (in reality any browser with a decent developer tools), open a repository (in this case, pAjax), right-clicking on any directory, simply choose inspect element.
This will display the
aelement responsible for the directory link.A "suspect" class showed up, let's search for it on the javascript source of the page.
And here it's, the click event handler for the directory link, in addition to the entire code related to the animation and the History Api. And as can be noted, it's not used any library behind the History Api. Don't forget to mark the Pretty Print option.
Old and incorrect answer
GitHub uses the jQuery plugin pJax (pushState + Ajax), which uses the HTML5 history API.