Как AJAX делается в обзоре исходного кода github? - PullRequest
Новая
       10

Как AJAX делается в обзоре исходного кода github?

5 голосов
/ 28 января 2012

Github имеет действительно хороший исходный браузер.Навигация по различным путям в репозитории генерирует ajax-вызовы для загрузки контента (как вы можете ясно увидеть в журнале Firebug).Вызов ajax возвращает HTML нового списка файлов для отображения.В дополнение к изменению списка просмотра файлов, URL-адрес также изменяется.Однако он не использует фрагменты, как большинство сайтов с глубокими ссылками на ajax (использование #).На github изменяется весь URL.

Например, при репозитории django в https://github.com/django/django при переходе в папку 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 ]

7 голосов
/ 28 января 2012

Вы должны использовать метод pushState () HTML5 для изменения истории браузера. 

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

Док говорит:

pushState () принимает три параметра: объект состояния, заголовок (который в настоящее время игнорируется) и (необязательно) URL.

Последний аргумент - новый URL. По соображениям безопасности вы можете изменить только путь URL, а не сам домен. Второй аргумент - это описание нового состояния. И первый аргумент - это некоторые данные, которые вы, возможно, захотите сохранить вместе с состоянием.

4 голосов
/ 28 января 2012

Что ж, как было описано в комментариях Dav , похоже, что GitHub не использует библиотеку pAjax.Из-за того, что я ответил «неправильной» информацией (на самом деле, я думаю, что когда-то отвечал на этот вопрос, я видел что-то, связанное с GitHub, использующим pAjax, но в данный момент я не могу найти источник), я пошел послеправильный ответ.

Я не нашел ничего официального со стороны разработчиков относительно того, использовалась ли какая-либо библиотека, нашел только сообщение о том, что использовался History API: https://github.com/blog/760-the-tree-slider

ТогдаМне пришло в голову, почему бы не спросить сам код?

Используя Chrome (на самом деле любой браузер с достойными инструментами разработчика), откройте репозиторий (в данном случае pAjax), щелкнув правой кнопкой мыши по любому каталогу,просто выберите элемент проверки.

Inpect Element

Это отобразит элемент a, отвечающий за ссылку каталога.

HTML Structure

AПоявился класс «подозреваемый», давайте поищем его в исходном тексте javascript на странице.

The Codez!

И вот он, обработчик события click для ссылки на каталог, вдополнение ко всему коду, связанному с анимацией и историей Api.И, как можно заметить, за Историческим API не используется ни одна библиотека.Не забудьте отметить опцию Pretty Print.

Старый и неправильный ответ

GitHub использует плагин jQuery pJax (pushState + Ajax), который использует API истории HTML5.

...