Загрузка страницы с помощью Ajax как ВКонтакте

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

Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).

Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:

Подключение скриптов:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/hashchange.js"></script>

Функция:

	$jQuery = jQuery.noConflict();
	$jQuery(window).hashchange(function(){
		var link = window.location.hash.replace("#", "");
		get_page_by_hash(link);
	});

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

Вторым шагом я сделал саму функцию «get_page_by_hash»:

 function get_page_by_hash(link){
	if(typeof(link) != "undefined"){
		if(link != ""){
			$jQuery.ajax({
				type: "POST",
				cache: false,
				async: false,
				url: link,
				success: function(data){
					if(data != ""){
						$jQuery("body").html(data);
					}
				}
			});
		}
	}
 }

В данной функции происходит замена html в тебе body на html, который пришел в ответе на запрос.
1. Метод передачи данных — POST нужен для определения того зашли просто на страницу или это запрос через ajax. Это позволит в шаблоне сделать условие, которое будет скрывать данные не требующие отображения при запросе скриптом:

if($_SERVER["REQUEST_METHOD"] == "GET"){ } 

Так же с помощью этого метода можно сделать замену html не в теге а внутри любого элемента, которого можно выбрать с помощью jQuery, при этом обрезать все не нужное в шаблоне с помощью условия, указанного выше.

Следующим шагом было выставление хеша страницы который мы отслеживаем с помощью функции выше:

$jQuery("a").click(function(){
	if($jQuery(this).attr("href").substr(0, 1) == "/"){
		window.location.hash = $jQuery(this).attr("href");
	}
});

Данная функция позволяет добавить hash в адресную строку браузера, работает во всех браузерах.

Так же все видили, что вконтакте в браузерах Mozilla и Chrome адрес меняется без перезагрузки страницы, чтобы этого добиться нужно сделать еще пару шагов:

1. Нужно определить браузер с помощью этой функции:

function getNameBrouser() {
	var userAgent = navigator.userAgent.toLowerCase();
	// Определим Internet Explorer
	if (userAgent.indexOf("msie") != -1 && userAgent.indexOf("opera") == -1 && userAgent.indexOf("webtv") == -1) {
		return "msie";
 	}
 	// Opera
 	if (userAgent.indexOf("opera") != -1) {
 		return "opera";
	}
 	// Gecko = Mozilla + Firefox + Netscape
	if (userAgent.indexOf("gecko") != -1) {
 		return "gecko";
	}
	// Safari, используется в MAC OS
	if (userAgent.indexOf("safari") != -1) {
 		return "safari";
	}
	// Konqueror, используется в UNIX-системах
	if (userAgent.indexOf("konqueror") != -1) {
 		return "konqueror";
	}
	return "unknown";
}

2. Теперь нам нужно расширить функцию обновления hash страницы:

$jQuery("a").click(function(){
	if($jQuery(this).attr("href").substr(0, 1) == "/"){
		if(getNameBrouser() == "gecko"){
			window.history.pushState("", "", $jQuery(this).attr("href")); 
			window.history.replaceState("", "", $jQuery(this).attr("href"));
			get_page_by_hash($jQuery(this).attr("href"));
		}else{
			window.location.hash = $jQuery(this).attr("href");
		}
		return false;
	}
 });

С помощью данных скриптов у Вас будет сайт похож (по переходам по страницам) на сайт вконтакте.ру