введение в history API

С появлением HTML5 появилась возможность управлять адресной строкой без location.hash и отслеживать нажатие кнопок <назад> и <вперед> в браузере. На данный момент это работает только в Mozilla Firefox с версии 3.7 и во всех версиях Google Chrome. Это позволяет перевести свой сайт полностью на ajax, загружая только нужные части сайта, что тратит меньше процессорного времени сервера и трафика пользователя (если у него лимитный интернет).
Как же использовать эту «фичу»?

В чем же преимущество history API перед location.hash?

• Часть адреса после "#" (hash) не отправляется на сервер, что создает трудности при прямом переходе по такой ссылке. С history API же таких трудностей не возникает.
• Чтобы отследить изменение hash нужно ставить интервал (setInterval()) и сравнивать текущий hash с записанным ранее.В history API можно поставить обработчик на навигационные кнопки.

Смена адреса

Попробуем просто изменить адресную строку в браузере. Открываем консоль Chrome или же FireBug если у вас Mozilla.

history.pushState(null,null, 'newAdress');

Если в адресной строке только название сайта,символ "#" или GET запрос, то адрес будет "site.ru/newAdress". Если же в адресе есть только указания пути к файлу или имитация этого с помощью mod_rewrite, например "site.ru/users/user1", то адрес изменится только после последнего слэша, то есть станет "site.ru/users/newAdress".
Кстати, есть способ проверить поддержку history API в браузере и, если не работает, использовать location.hash.

var histAPI=!!(window.history && history.pushState);

histAPI==true если поддерживается history API, иначе false.

Теперь о том, как использовать эту функцию.

function go(link) 
{ 
link.addEventListener 
( 
"click",  
function(e) { 
history.pushState(null, null, link.href); 
//ajax загрузка нужной части сайта. 
e.preventDefault();//снятие стандартного действия ссылки 
}, 
true 
) 
}

и в window.onload пишем

window.onload=function(){ 
go(document.getElementById('link1')); 
go(document.getElementById('link2')); 
}

Здесь мы привязали к клику по нужной нам ссылке нужное действие.

Навигационные кнопки браузера

Теперь разберемся с нажатиями кнопок <вперед> и <назад> в браузере.
Опять же в window.onload пишем вот такой код

window.onload=function(){ 
window.setTimeout( 
function()  
{ 
window.addEventListener( 
"popstate",  
function(e) { 
//ajax загрузка нужной части сайта. 
e.preventDefault(); 
},  
false 
); 
}, 
 1); 
}

Функция устанавливает обработчик клика на кнопку назад и снимает с него стандартное действие.

Спасибо за прочтение.