Ajax-навигация как у Твиттера и Контакта

Наверно многие задавались вопросом технической реализации навигации по страницам Твиттера, ВКонтакте.ру и возможно других.

Приведу пример. Вот ссылка на страницу в Твиттере — twitter.com/#!/xxxxxxxx, при при изменении xxxxxxxx идет независимая подгузка (при помощи AJAX) контента в указанное место страницы. Примерно такая же система реализована ВКонтакте.

Дело в том что хеш адреса можно использовать не только для поиска по якорям закладок в документе, но и для создания событий связанных с ним. Насколько мне известно, поиск по якорям осуществляется только при наличии латинских букв в начале хеша, поэтому рекомендую использовать значение хеша начинающегося со знака или цифры.

Перейду непосредственно к реализации всего этого.
Для этого потребуются:

  1. Популярная JavaScript библиотека jQuery;
  2. Обработчик события 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>

Преимущества этого вида запроса:

  1. Страница не загружается полностью;
  2. Визуальная замена URL (подобно mod_rewrite);
  3. Небольшая экономия трафика;

http://habrahabr.ru/sandbox/29645/#habracut

Share