Pull to refresh

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

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

Приведу пример. Вот ссылка на страницу в Твиттере — 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. Небольшая экономия трафика;
Tags:
Hubs:
You can’t comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.