Смена URL без перезагрузки на javascript history

Привет. Думаю многим интересно как сделана смена адреса в адресной строке браузера (попросту смена URL без перезагрузки страницы) на таких сайтах, как Facebook, Vk.com и других.

На самом деле сложного нет ничего! Это всё новое API для работы с историей браузера. Есть такая функция:

window.history.pushState("object or string", "Title", "/new-url");

Собственно говоря, для реализации смена URL без перезагрузки страницы больше ничего и не нужно.
При нажатии на кнопку, которая должна сменить URL, вы вызываете эту функцию, в истории показывается, что вы находитесь в состоянии, переданном в первом параметре (это может быть объект или строка), а адрес в строке браузера поменяется на указанный в 3-м параметре.

Для вас мы подготовили пример реализации смены URL без перезагрузки на простеньком сайте: http://htmler.ru/history.demo/

Если покликать по пунктам верхнего меню адрес сайта поменяется, а перезагрузки не произойдет.

Как сделать смена URL без перезагрузки?

Для удобства обработки кликов на кнопки мы использовали jquery, но код самой смены будет работать и без jQuery.

    	$(function(){
    		doHistoryLogic();
	    	$('.dolink').click(function(e){
	    		e.preventDefault();
	    		$('.nav li').removeClass('active');
	    		$(this).parent().addClass('active');
	    		window.history.pushState($(this).attr('id'), "Title", $(this).attr('href'));
	    		doHistoryLogic();
	    	});
    	});
    	var doHistoryLogic=function(){
	    	switch(window.history.state){
		    	case "home":
		    		$('.about,.contact').fadeOut();
		    		$('.home').fadeIn();
		    		break;
		    	case "about":
		    		$('.home,.contact').fadeOut();
		    		$('.about').fadeIn();
		    		break;
		    	case "contact":
		    		$('.about,.home').fadeOut();
		    		$('.contact').fadeIn();
		    		break;	
		    	default: $('.about,.contact').fadeOut();
		    		$('.home').fadeIn();
		    		break;	    		
	    	}
    	}

Опишу немного код:
После загрузки страницы (когда срабатывает document.ready) мы вызываем функцию doHistoryLogic (о ней чуть позже), а потом навязываем обработчики на события кликов мышки по кнопкам верхнего меню. Грубо говоря мы отменяем через e.preventDefault() стандартное действие при клике (переход по указанной ссылке), и делаем своё — ставим отметку, что ссылка активна, засовываем новое состояние с новым URL в историю и опять вызываем функцию doHistoryLogic.

Что же это за функция? Она просто берет текущее состояние истории и на основе этого состояния скрывает или показывает нужное содержимое. Тут может идти и простое скрытие элементов, как у нас, и прогрузка элементов через ajax — в общем тут уже дело ваших потребностей и фантазии.