Ajax如何在github上浏览来源做了什么？ [英] How AJAX is done in github source browse?

问题描述

Github上有一个非常好的源码的浏览器。在回购不同的路径之间的导航产生Ajax调用加载的内容（你可以清楚地看到萤火虫日志）。 Ajax调用返回要显示的文件的新名单的HTML。除了改变文件的查看列表，该URL也会改变。然而，它并没有使用像大多数AJAX深层链接的网站（使用＃的）片段。在GitHub上整个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.

例如在Django的回购在 https://github.com/django/django 将 Django的文件夹，将产生Ajax请求 https://github.com/django/django/tree/master/django?slide=1&_=1327709883334 这将返回该文件夹中的HTML内容。链接也将改变为<一个href="https://github.com/django/django/tree/master/django">https://github.com/django/django/tree/master/django.正如你可以看到这个新的链接不使用的片段。

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.

这是怎么一回事？我始终认为，基于AJAX技术的网站必须使用URL片段（＃）来实现深度链接，但显然并非如此。

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.

推荐答案

嗯，因为是由 DAV 在评论中所述，似乎GitHub上不使用pAjax库。由于我结束了一个不正确的信息（其实我觉得我已经看到一些使用pAjax当我回答这个问题涉及到GitHub上，但此刻我无法找到源）回答其实，我以后去正确的答案。

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.

我没有发现任何正式的关于任何库是否被用于开发的部分，只发现一个帖子说，历史API的使用：的 https://github.com/blog/760-the-tree-slider

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

再来到我的头，为什么不问code本身？

Then came to my head, why not ask the code itself?

使用Chrome浏览器（在现实中有一个体面的开发工具的任何浏览器），打开一个资源库（在此情况下，pAjax），右键点击任意目录，只需选择检查元素。

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.

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

This will display the a element responsible for the directory link.

一个可疑类出现了，让我们来寻找它在页面的JavaScript源。

A "suspect" class showed up, let's search for it on the javascript source of the page.

在这里，它是，click事件处理程序的目录链接，除了整个code相关的动画和历史API。并且如可以注意到，它不使用背后的历史阿比任何库。不要忘记，以纪念pretty的打印选项。

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.

<打击> GitHub上使用jQuery插件 pJax （pushState +阿贾克斯），它使用HTML5历史API。

GitHub uses the jQuery plugin pJax (pushState + Ajax), which uses the HTML5 history API.

这篇关于Ajax如何在github上浏览来源做了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！