Наверно многие задавались вопросом технической реализации навигации по страницам Твиттера, ВКонтакте.ру и возможно других.
Приведу пример. Вот ссылка на страницу в Твиттере — twitter.com/#!/xxxxxxxx, при при изменении xxxxxxxx идет независимая подгузка (при помощи AJAX) контента в указанное место страницы. Примерно такая же система реализована ВКонтакте.
Дело в том что хеш адреса можно использовать не только для поиска по якорям закладок в документе, но и для создания событий связанных с ним. Насколько мне известно, поиск по якорям осуществляется только при наличии латинских букв в начале хеша, поэтому рекомендую использовать значение хеша начинающегося со знака или цифры.
Перейду непосредственно к реализации всего этого.
Для этого потребуются:
Примеры будующего адреса страницы:
HTML-документ:
Этот фрагмент кода можно использовать для составления любых событий связанных с хешем:
Преимущества этого вида запроса:
Приведу пример. Вот ссылка на страницу в Твиттере — twitter.com/#!/xxxxxxxx, при при изменении xxxxxxxx идет независимая подгузка (при помощи AJAX) контента в указанное место страницы. Примерно такая же система реализована ВКонтакте.
Дело в том что хеш адреса можно использовать не только для поиска по якорям закладок в документе, но и для создания событий связанных с ним. Насколько мне известно, поиск по якорям осуществляется только при наличии латинских букв в начале хеша, поэтому рекомендую использовать значение хеша начинающегося со знака или цифры.
Перейду непосредственно к реализации всего этого.
Для этого потребуются:
- Популярная JavaScript библиотека jQuery;
- Обработчик события onhashchange jQuery.Router;
Примеры будующего адреса страницы:
http://site.ru/#/xxxxxxxx - соответствует http://site.ru/pages.php?action=xxxxxxxx http://site.ru/#/xxxxxxxx&yy=zz - соответствует http://site.ru/pages.php?action=xxxxxxxx&yy=zz
HTML-документ:
<html>
<head>
<title>Страница</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.router.js"></script>
<script type="text/javascript">
function url2obj(hash){ // обработка хеша
var action
if(hash.substr(0,2)=='#/') action=hash.substr(2); else action=hash;
var properties=action.split(/&/);
var obj={}
$.each(properties,function(){
var p=this.split(/=/);
obj[p[0]]=p[1];
});
return obj; // объект параметров запроса
}
function loadPage(hash){ // подгрузка контента
var obj=url2obj(hash)
$.post('pages.php',obj,function(text){ // или $.get();
$("#contentBlock").html(text);
});
}
$(document).ready(function(){
$.router(function(hash){ // обработчик события onhashchange
loadPage(hash);
});
}
</script>
</head>
<body>
<a href="#!/xxxxxxxx">ссылка на страницу http://site.ru/pages.php?action=xxxxxxxx</div>
<div id="contentBlock"></div>
</body>
</html>Этот фрагмент кода можно использовать для составления любых событий связанных с хешем:
<script type="text/javascript">
$(document).ready(function(){
$.router(function(hash){
// ....................
function(hash);
// ....................
});
}
</script>Преимущества этого вида запроса:
- Страница не загружается полностью;
- Визуальная замена URL (подобно mod_rewrite);
- Небольшая экономия трафика;