Загрузка страницы с помощью Ajax как ВКонтакте
Не так давно я задался вопросом, как же можно сделать так, чтобы страницы загружались с помощью ajax скрипта, как вконтакте и при этом были проиндексированы поисковыми машинами.
Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).
Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:
Подключение скриптов:
Code
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/hashchange.js"></script>
<script type="text/javascript" src="/js/hashchange.js"></script>
Функция:
Code
$jQuery = jQuery.noConflict();
$jQuery(window).hashchange(function(){
var link = window.location.hash.replace("#", "");
get_page_by_hash(link);
});
$jQuery(window).hashchange(function(){
var link = window.location.hash.replace("#", "");
get_page_by_hash(link);
});
Данная функция вызывает функцию «get_page_by_hash» при изменении хэша страницы, первым аргументом которой будет являться ссылка на страницу.
Вторым шагом я сделал саму функцию «get_page_by_hash»:
Code
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);
}
}
});
}
}
}
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. Это позволит в шаблоне сделать условие, которое будет скрывать данные не требующие отображения при запросе скриптом:
Code
if($_SERVER["REQUEST_METHOD"] == "GET"){ }
Так же с помощью этого метода можно сделать замену html не в теге а внутри любого элемента, которого можно выбрать с помощью jQuery, при этом обрезать все не нужное в шаблоне с помощью условия, указанного выше.
Следующим шагом было выставление хеша страницы который мы отслеживаем с помощью функции выше:
Code
$jQuery("a").click(function(){
if($jQuery(this).attr("href").substr(0, 1) == "/"){
window.location.hash = $jQuery(this).attr("href");
}
});
if($jQuery(this).attr("href").substr(0, 1) == "/"){
window.location.hash = $jQuery(this).attr("href");
}
});
Данная функция позволяет добавить hash в адресную строку браузера, работает во всех браузерах.
Так же все видили, что вконтакте в браузерах Mozilla и Chrome адрес меняется без перезагрузки страницы, чтобы этого добиться нужно сделать еще пару шагов:
1. Нужно определить браузер с помощью этой функции:
Code
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";
}
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 страницы:
Code
$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;
}
});
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;
}
});
С помощью данных скриптов у Вас будет сайт похож (по переходам по страницам) на сайт вконтакте.ру
-
FalleN -
3415 -
1 -
0
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...