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

[@sajgak]

[зануда]Скажите, а при чем тут ВК? Вы других сайтов с аякс навигацией не используете? [/зануда]

[@TheShock]

fullajax.com/

[@ckald]

А я вот так это делаю habrahabr.ru/blogs/webdev/123972/

[@szKarlen]

Думаю определение History API намного легче было бы, если вместо:

function getNameBrouser() {
 var userAgent = navigator.userAgent.toLowerCase();
 // Определим Internet Explorer
 //...весь остальной код
 return "unknown";
}

и

$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");
   }
  }
 });

написать просто:

function has_history_api() {
  return !!(window.history && history.pushState);
}

$jQuery("a").click(function(){
  if($jQuery(this).attr("href").substr(0, 1) == "/"){
   if(has_history_api()){
    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");
   }
  }
 });

[@TheShock]

и вообще — так:

jQuery("a").click(function(){
   var href = jQuery(this).attr("href");
   if( href.indexOf('/') != 0 ) return;

   if ( window.history && history.pushState ) {
     history.pushState   ("", "", href); 
     history.replaceState("", "", href);
     get_page_by_hash(href);
   } else {
     location.hash = href;
   }
 });

[@szKarlen]

тогда еще короче:

$("a").click(function(){
   var href = $(this).attr("href");
   if( href.indexOf('/') != 0 ) return;

   if ( window.history && history.pushState ) {
     history.pushState   ("", "", href); 
     history.replaceState("", "", href);
     get_page_by_hash(href);
   } else {
     location.hash = href;
   }
 });

экономия 12 байт :)

[@TheShock]

Для плагина не очень подходит, т.к. в плагинах желательно использовать длинное названия.

[@Zaharov]

Так ведь же можно делать так:

(function( $ ){
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here

};
})( jQuery );

[@imsamurai]

Для этой цели есть библиотека pjax (https://github.com/imsamurai/jquery-pjax). И скоро мы со ckald сделаем демо-страничку с подробным описанием всех возможностей. Там есть и pushState и hash navigation.

[@imsamurai]

github.com/imsamurai/jquery-pjax

[@ckald]

О, просмотрел, что ты уже :). Удваиваю наш pjax – безукоризенно отработал на всеукраинском медиаконкурсе с mp3-плеером

[@oe24]

Надо же было ссылку на демо вставить!

[@mr_avi]

Ссылку на вконтакте?:)

[@alpha6]

Лучше проверять на AJAX в скрипте не по методу запроса, а через заголовки.

[@Timmay]

Имхо:

1. Браузер лучше определять через фичдетект, а не по user-agent.
2. AJAX-запрос определять по заголовку, а не методу
3. Использовать live вместо click
4. Обернуть всё в $jQuery(function() { });
5. "!==" вместо "!="; "===" вместо "=="
6. Закэшировать $jQuery(this).attr('href')
7. Browser :)

Как-то так

[@Timmay]

8. Из комментария ниже — добавить return false; в обработчик клика

[@walkman7]

или e.preventDefault();

[@SiDChik]

Подобную штуку я делал в одной из админок:
1. Перехватываем все ссылки и делаем запрос к серверу:

 $("a").click(function()
{
  $.ajax({
  data:{'isajax':true;}
  url:$(this).attr('href');
  success:function(data){
    
    $("#container").html(data);
  }
  });
});

2. Со стороны сервера проверяем наличие заголовка $_SERVER['HTTP_X_REQUESTED_WITH']) (PHP), либо POST переменной isajax, если так оно и есть, то меняет переменную шаблона.

3. Если нужно передать скрипты тогда в шаблоне через какой-нибудь спецсимвол выводим список скриптов, парсим при событии success, подключаем их после добавления html к телу документа.

[@SiDChik]

Простите забыл добавить

return false;

В конце обработчика клика по ссылке…

[@zelenoff]

я не увидел, гарантию того, что это всё проиндексируется поисковиками.
Google то может быть, а остальные?

[@koksharov]

все ссылки стоят не #/url/to/page а /url/to/page а т.к. поисковые роботы не используют javascript они нормально индексируют сайт

[@webdiktor]

А как же поведенческие факторы? Поисовик увидит, что пользователь был на одной странице, хотя пользователь мог десяток страниц просмотреть.

[@Hig]

Поясните, пожалуйста, этот момент.

[@webdiktor]

Поисковик видит, что на главной странице сайта есть ссылки на внутренние. А также видит, что по ним никто не переходит. По этому поведенческому фактору он может значительно понизить вес, передаваемый ссылками главной на внутренние.

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

[@Hig]

Подождите… А как поисковик видит, что кто-то делает переход по ссылкам на сайте? Разве связь между поисковиком и сайтом не разрывается в тот момент, когда осуществляется переход из поисковой выдачи на конкретную страницу?

[@koksharov]

даже если есть аналитика, поисковики видят что был переход со страницы на страницу, т.к. загружается скрипт аналитики

[@Hig]

Мм… Вернее – если есть/подключена аналитика. Тогда это все объясняет. Согласен. Спасибо.

[@webdiktor]

Есть еще тулбары, а также хитрый хром, собирающий нужную гуглу информацию.

[@artishok]

А демо есть?

[@mr_smith]

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

[@MechanisM]

пользуюсь jquery-pjax + django-pjax

[@JiLiZART]

все татары кроме я, getNameBrouser(), getNameBrowser()

[@ferrari]

jquery (да и другие библиотеки) для ajax добавляют свой ключ, по нему и нужно определять. не по get-post
function isAjax ()
{
if (
isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == «XMLHttpRequest») return true;
return false;
}

[@rwz]

Зачем строка $jQuery = jQuery.noConflict();, когда уже есть глобальная переменная jQuery? Тупняк — лишняя переменная, лишний байт, смысла ноль.

Последние версии jquery давно умеют $(window).bind('hashchange') без всяких плагинов.

По getNameBrouser() уже прошлись выше.

Вцелом, очень низкого качества код.

[@rwz]

Еще, кстати, очень раздражает, когда в одном коде рядом используюется и camelCase и under_score. Создается впечатление, что автор накопипастил из разных мест, а сам программировать не умеет.

[@MechanisM]

есть целое направление программистов конуструкторов кода, которые просто методом тыка\копипаста действуют. программить вообще не умеют а чистый копипаст. как кубики лего складывают из кусков разного кода.

[@AmdY]

нужно вешать событие на live, чтобы ссылки в подгружаемом контенте тоже были аяксовыми
jQuery(«a»).live('click', function(){… })

[@nicola]

|| jQuery.delegate (stackoverflow)

[@nicola]

stackoverflow.com/questions/4579117/jquery-live-vs-delegate

[@radist2s]

Все уже давно придумано в нескольких интерпретациях. Главный минус использовать от использования хештега — вам до конца жизни нужно будет тащить страницу с яваскриптом на ней, чтобы показывать контент юзерам. Этих недостатки полностью исключает History API. Именно в комбинации и нужно использовать оба способа — там где уже возможно pushState, там где это не возможно(привет олдскул браузеры) — юзать хештег. Указанная мною выше библиотека сама понимает, когда нужно использовать какой способ подмены адреса браузера.

[@coh]

Тащить весь html не целесообразно, значительно быстрее запрашивать только данные, отрисовывать и кэшировать их на стороне клиента. На эту проблему натолкнулись разработчики мобильного приложения html5 facebook, после чего заявили что native намного шустрее. На что им намекнули создатели ExtJs
www.theregister.co.uk/2012/09/14/facebook_html_5_vs_native_apps/
www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story