Как реализован роутинг на kinopoisk.ru и slack.com?

Question

[HoHsi]

Доброго дня!
Как реализован роутинг на таких сайтах как https://kinopoisk.ru и https://slack.com? При переходе по ссылке страница не релоадится, а просто обновляется через ajax.
Прошу заметить, что там все работает не на хеш роутинге (Что объяснило бы, отсутствие релоада), а именно на взрослом роутинге со стороны сервера.

Или это все сделано через перехвал нажатий на ссылки и отмены дефолтного действия, по средствам JS? А дельше просто парсинг ссылки с ajax.

Comments

[Lynn «Кофеман»]

History API + перехват переходов по ссылке

[copal]

а как Вы узнаете релодится страница или нет? У меня показывает что обновляется, кнопка обновить крутится..

[HoHsi]

copal: положение прокрутки страницы остается на том же уровне. + это видно в отлодчике

Answer 1

[Mikhail Osher]

history.pushState

// EDIT для тех, кто в танке (ПСЕВДОКОД)

$('a').on('click', function(event) {
  event.preventDefault();
  var url = $(this).attr('href');
  Router.change(url);
});

// Router.change
function change(url) {
  history.pushState(url);

  var view = this.getView(url);
  ViewManager.setView(view);

  var controller = this.getController(url);
  controller.dispatch();
}

Comments

[HoHsi]

Амм, нет. Там не хеш роутинг

[HoHsi]

Максим Зайцев: это всеравно не решает вопрос. Я понимаю, что я могу пушить в истоию, но почему не релодится страница при нажатии на ссылку

Answer 2

[Павел Волынцев]

Чтобы определить, как сайт подгружает информацию, воспользуйся панелью отладки в браузере, закладка "Network" (иллюстрация)
Если при клике по ссылке появился запрос типа XHR, то это AJAX
Если типа "DOC", то это обычный переход по ссылке
Если клик был, а запросов на сервер не было, значит данные уже были загружены в браузер и хранятся, например, в оперативной памяти или в LocalStorage браузера (иллюстрация)

Если сайт по большей части делает только подгрузку данных, то это веб-приложение архитектуры RIA (Rich Internet Application).