примерно так положить это в index.php:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="history.js?redirect=true"></script>
<script type="text/javascript">
// метод загружает данные и куда то их рассовывает
function loadContent(url, callback) {
// вызвать аякс
alert('Нужно загрузить контент по ссылке: ' + url);
// вызвать callback после удачной загрузки контента
callback && callback();
}
(function(eventInfo) {
// вешаем события на все ссылки в нашем документе
document[eventInfo[0]](eventInfo[1] + 'click', function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
// ищем все ссылки с классом 'ajax'
if (target && target.nodeName === 'A' &&
(' ' + target.className + ' ').indexOf('ajax') >= 0)
{
// тут можете вызвать подгрузку данных и т.п.
loadContent(target.href, function() {
// заносим ссылку в историю
history.pushState(null, null, target.href);
});
// не даем выполнить действие по умолчанию
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}, false);
// вешаем событие на popstate которое срабатывает при нажатии back/forward в браузере
window[eventInfo[0]](eventInfo[1] + 'popstate', function(event) {
// получаем нормальный объект Location
/*
* заметьте, это единственная разница при работе с данной библиотекой,
* так как объект document.location нельзя перезагрузить, поэтому
* библиотека history возвращает сформированный "location" объект внутри
* объекта window.history, поэтому получаем его из "history.location".
* Для браузеров поддерживающих "history.pushState" получаем
* сформированный объект "location" с обычного "document.location".
*/
var returnLocation = history.location || document.location;
// тут можете вызвать подгрузку данных и т.п.
loadContent(returnLocation.href)
}, false);
})(window.addEventListener ? ['addEventListener', ''] : ['attachEvent', 'on']);
</script>
</head>
<body>
<a class="ajax" href="?ie=md1">Md1</a>
<a class="ajax" href="?ie=md2">Md2</a>
</body>
</html>
а на сервере если используете apache, в .htaccess нужно написать такие строки:
# Наш сайт будет работать с кодировкой UTF-8 тем самым серверу мы укажем о том что бы он самостоятельно
# добавлял в заголовок Content-Type подстроку charset=utf-8 в тех случаях когда ее нет
AddDefaultCharset UTF-8
# Укажем серверу информацию о том какой файл является по умолчанию для ссылки вида http://somesite.com/
DirectoryIndex index.php
# Включаем модуль преобразований ссылок
RewriteEngine On
# Условие если в ссылке нет прямого доступа к файлу
RewriteCond %{REQUEST_FILENAME} !-f
# то передаем управление основному обработчику, в нашем случае это index.php
RewriteRule ^(.*) index.php [QSA,L]
|