PJAX vs jQuery Adress

PJAX vs jQuery Adress

Вообще-то я очень люблю AJAX. Не представляю себе бэкенд сайта без него -) А вот для фронтенда доселе использовал jquery-adress и радовался жизнью, пока не натолкнулся на технологию PJAX (PushState + Ajax демка).

Крутая вещь! На гитхабе лежат разные сборки, но вот эта зе бест: https://github.com/imsamurai/jquery-pjax – усовершенствованны тригеры (некоторые у меня не заработали), встроенная функция для отправки форм, добавлены хешченжи, хешхистори, выборка тайтлов, учтено гугланалитик, реплейсы (!#) для браузеров что не поддерживают pjax…

Для тех кто в танке -) Вконтактик заходите включаете музичку нажимаете на другую ссылочку, а музяка продолжает играть, а знаете почему?! Да все потому же аяксы-хуяксы, принцыпы те же, только у них самописноэ.

Спасибо ckald, за помощь!

0 comments
  1. Сосед по дому
    Сосед по дому
    24.07.2011 at 03:40

    Игорь, ну ты даешь. Я вот человек, тоже вроде с программированием дружу ну понять некоторые слова с первого раза не смог. Поясни что ты имел в виду, буду очень благодарен. 🙂
    бэкенд сайта – это…
    хешченжи, хешхистори – это…
    учтено гугланалитик – это…
    реплейсы – это…

    П.С. Заодно добавим текстовый контент на сайт 😉

    Reply
  2. utz0r2
    utz0r2
    24.07.2011 at 16:34

    бэкенд (backend) – административная часть сайта
    фронтенд (frontend) – клиентская часть сайта
    хешченжи (hashchange) – это событие в js которое позволяет использовать кнопки в браузере – назад вперед (не посредственно с якорями #)
    хешхистори ( hash history ) – та же хрень что и хешченжи но уже с ссылками (событие pushState), с появлением HTML5 такая штука заработала.
    учтено гугланалитик – это вставив код гугланалитики никаких дополнительных телодвижений делать не нужно.
    реплейсы (replace) – старые браузеры не поддерживают замени на лету (pushState) например site.ua/about на site.ua/contacts, а вот реплейс сделает из site.ua/about = site.ua/#!about и site.ua/contacts = site.ua/#!contacts

    Reply
  3. ARMWeb
    ARMWeb
    24.09.2011 at 12:29

    Здравствуйте! Скажите пожалуйста, как использовать pjax на сайте, не знаю почему, но он у меня почему то не работает.
    Жду ответа. Заранее спасибо!

    Reply
  4. utz0r2
    utz0r2
    24.09.2011 at 15:21

    Ну к примеру вот так:
    1) подключаете яву в шаблоне
    2) В странице вывода пишем:

    if (!isset($_SERVER['HTTP_X_PJAX']))
    {
       include $_SERVER['DOCUMENT_ROOT'].'/путь/к/шаблону/шаблон.php';
    }
    else
    {
       echo $our_content;
    }


    в случае если нет заголовка $_SERVER['HTTP_X_PJAX'] выдавать обычную страницу с шаблона, в противном случае выдвать только контент (он же аяксовый)

    Reply
  5. ARMWeb
    ARMWeb
    24.09.2011 at 15:54

    Вот код:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script&gt;
    <script type="text/javascript" src="/jquery.pjax.js"></script>

    <?

    if (!isset($_SERVER['HTTP_X_PJAX']))
    {
    echo "NO";
    }
    else
    {
    echo "YES";
    }

    ?>

    яву подключаю, а он выводит "NO". Что мне делать?

    Reply
  6. utz0r2
    utz0r2
    24.09.2011 at 17:23

    Ну а еще ж

      <script>
        $(function(){
          $('a').pjax('#main') // инициализируем всех для ссылок результат выплевываем в #main
        })
      </script>


    <div id="main"><?php echo $our_content; ?></div>

    то есть 1 раз страница грузится целиком (в вашем случае NO) после клика на любую ссылку будет отправлятся пост запрос с заголовком HTTP_X_PJAX и выдавать его в контейнере main

    Reply
  7. ARMWeb
    ARMWeb
    24.09.2011 at 18:09

    igor_veselov, получилось )))
    Большое спасибо за помощь.

    Reply
  8. Виктор
    Виктор
    31.01.2012 at 15:02

    Всё подключил.
    Эта функция работает:


      function content(url)
        {
          $.pjax
          ({
            url: url,
            container: '#js_content'
          })
        }


    а эта нет((


    $(function(){
          $('a').pjax('#js_content')
        })


    Она не отправляет HTTP_X_PJAX((
    Что делать?

    Reply
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *