Как обновить страницу html и url без актуального обновления страницы

Question

Мне интересно, может ли кто-нибудь указать мне в направлении изучения того, как обновить страницу html и url, не обновляя страницу.

Есть ли существующие javascript-библиотеки, которые обрабатывают это, или там есть хорошая книга, которая покрывает такие вещи.

Ниже приведен пример сайта с использованием этого эффекта.

http://onedesigncompany.com/

Обратите внимание на фактическое HTML является обновление, когда секция изменяется, а также URL, сохраняя при этом плавный переход без видимых обновления страницы. Сайт также работает правильно без javascript.

Также, если кто-либо видит недостатки в использовании этого подхода, я все уши.

Answer 1

Существует, и это называется PushState.

Это новейшая технология, которая поддерживает большинство новейших браузеров (Internet Explorer: P). В основном это изменяет адресную панель через javascript.

Я могу показаться не более, но это действительно здорово! Обычно вы делаете это через хэш-код www.example.com#/contact.

Последний проект, в котором я использовал эту технологию. Я использовал плагин js под названием History.js, который может определить, поддерживает ли ваш браузер PushState или нет.

В зависимости от этого я либо привязываю событие к релевантным ссылкам, которое выполняет pushstate, и некоторый ajax вместо загрузки нового сайта, либо пусть <a href=""> действует нормально.
Это делает все браузеры довольно счастливыми.

В основном мой сценарий создает тот же результат с обновлением, что и pushstate и ajax.

EDIT:
Просто примечание стороны на этом примере вашей. Это довольно умно сделано :)
Он загружает новые страницы через ajax и получает его HTML, но если вы снова просмотрите эту страницу, он повторно отобразит полученные результаты, чтобы не делалось ненужных вызовов ajax.

Answer 2

Если вам необходимо повторно загрузить часть страницы, без перезагрузки всей страницы, я настоятельно рекомендую использовать jQuery.Load():

http://api.jquery.com/load/

С jQuery.load() вы можете выбрать div и перезагружать его содержимое с другой веб-страницы. Например:

$(".myDiv").load("/myOtherwebpage.html"); 

Вы также можете указать содержимое из конкретного элемента на этой другой странице:

$(".myDiv").load("/myOtherwebpage.html .myOtherClass"); 

Однако, если вам нужно перезагрузить все содержимое с другой страницы, и изменить URL для на другой странице, тогда я бы просто рекомендовал ссылку на эту страницу. Благодаря этим функциям jQuery нет производительности.