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

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

Думаю определение 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");
   }
  }
 });

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

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

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

Имхо:

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

Как-то так

Подобную штуку я делал в одной из админок:
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 к телу документа.

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

А демо есть?

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

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

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

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

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

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

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

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

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

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

Тащить весь 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