ckald12 июл 2011 в 13:09

Создание одностраничного ajax-приложения с поддержкой History API (и без нее)

4 мин

52K

Веб-разработка *

+78

Комментарии 63

leshka 12 июл 2011 в 13:13

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

ckald 12 июл 2011 в 13:19

Я с ней познакомился ровно когда пришлось использовать :)

Terion 12 июл 2011 в 13:25

Автор, главное, допилил ее, чтоб в IE работало)

mihaild 12 июл 2011 в 15:10

Спасибо за статью.
Небольшое замечание: как многократно писали, не стоит пытаться «помочь» указанием чего-то вроде div#pjaxcontainer. Потому как в этом случае сначала выберутся все div-ы, и лишь потом будет выполнен поиск по id. А поиск по id сам по себе гораздо быстрее (самый быстрый из всех поисков по DOM).

ckald 12 июл 2011 в 15:15

Верно, чего это я. Сейчас поправлю

2fast4rabbit 12 июл 2011 в 15:15

Ниче не понял а где mp3 плеер? о_О

ckald 12 июл 2011 в 15:20

Зависит от того, что вы хотели спросить. Если вы о сайте, так он в верхнем правом углу должен быть, если о статье — совершенно верно, его там нет!

Если вам интересно, могу отдельную статью посвятить созданию mp3-плеера (или видео-плеера) с плейлистом и дополнительными функциями на основе jPlayer (http://jplayer.org/)

tripiz 16 июл 2011 в 16:18

Оооо просим-просим, очень интересно у меня с ним долгой дружбы не вышло… особено интересно если рассмотрите варинат мулти-инстанса, когда кучка объектов-плееров jPlayer на одной странице.

tripiz 16 июл 2011 в 16:21

Сам видео-ролик на странице-примере — чумовой :)

tripiz 16 июл 2011 в 16:26

Кстати под FF 3.6.18 то не работает что-то…

ckald 16 июл 2011 в 16:38

Я думаю, что нет смысла держать на компьютере с доступом в интернет Firefox версией ниже 4-й. Впрочем, попробуйте зайти на мой сайт — библиотеку мы с imsamurai модифицировали для работы с браузерами, не поддерживающими pushState. Так все должно работать.

Просто, у меня сейчас нету сервера, чтобы выложить там пример. Но я займусь этим

tripiz 16 июл 2011 в 16:44

Речь ни о нас с вами, а о пользователях, которые и IE любят, и обновлются не так шустро как бы нам хотелось. FF 4-ка зарелизилась то не так давно.

ckald 16 июл 2011 в 16:47

Тот пример, что вы смотрите — оригинальная библиотека defunkt'а. А он принципиально отказывается поддерживать не-pushState браузеры. Мы с imsamurai эту поддержку добавили — в виде hash-навигации.

tripiz 16 июл 2011 в 16:54

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

ckald 16 июл 2011 в 16:58

Ох… Посмотрите третий пункт в разделе «ссылки». Там предпоследняя версия, без улучшений от imsamurai

tripiz 16 июл 2011 в 17:06

Да, вы правы извините, не доглядел, ваш то пример с Amsterdam Music работает.

ckald 16 июл 2011 в 17:07

Знаете, я уже заметил, что это распространенная ошибка :)

tripiz 17 июл 2011 в 08:43

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

ckald 16 июл 2011 в 16:39

Или скачайте с github последнюю версию — я еще не обновлял исходники сайта.

ckald 12 июл 2011 в 15:32

Просто плеер не имеет отношения к pjax. Он просто помещен вне обновляемой зоны и навигация по сайту никак не затрагивает его работу.

2fast4rabbit 12 июл 2011 в 16:46

Ага теперь понял :)
Спасибо!

quasar 12 июл 2011 в 15:19

Хм, а как быть с индексированием в поисковиках?

ckald 12 июл 2011 в 15:21

Все урл доступны для поисковиков. Вы можете посмотреть: у каждой ссылки есть href и, при входе на него напрямую, браузер не отправляет заголовок X-PJAX и получает страницу целиком.

Все индексируется лучше некуда.

Nc_Soft 12 июл 2011 в 15:37

Мне не нравится одна вещь с хеш-навигацией.
Вот пример: кто-то с pjax навигацией дает ссылку кому-то с ие7
amsterdamusic.com.ua/profile/85
Этот кто-то с ие7 заходит по ссылке и его хеш начинает меняться вот так
amsterdamusic.com.ua/profile/85#!/profile/85
Можно сразу редиректить если хеш нужен и его нет с amsterdamusic.com.ua/profile/85 на amsterdamusic.com.ua/#!/profile/85, но тогда такая ссылка будет для поисковика совсем не тем, чем хочется.

Devgru 12 июл 2011 в 16:43

Восклицательный знак — специальный сигнал для поисковиков, что этот контент может быть доступен и другими путями. Без него хеш-навигация для поисковика действительно превращается в чёрный ящик.

Nc_Soft 12 июл 2011 в 17:30

site.ru/#!hash для поисковиков это site.ru/hash?
Или только для гугла?

Devgru 12 июл 2011 в 19:29

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

И да, вроде бы пока это только гугл.
Я не использовал этот функционал, только читал.

ckald 12 июл 2011 в 19:11

Не подскажете, а я ерунду не сделал, что слеш ставлю после восклицательного знака? :)

Devgru 12 июл 2011 в 19:43

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

ckald 12 июл 2011 в 19:45

Большое спасибо. Выходит, нужно добавить в контроллере запросов вида /_escaped_fragment_=… и превращать их в /…

Devgru 13 июл 2011 в 08:58

Не совсем. Не «превращать их» а отдавать поисковику контент, который увидит юзер, перешедший по аякс-запросу.
Т.е. схема такая:
— поисковик видит ссылку, в которой есть #!
— поисковик идёт по escaped_fragment-урлу и запрашивает страницу (в контектсте: «а что увидит юзер с таким аякс-запросом?»)
— ваш сервер должен выдать ему соответствующий контент (на сколько я понимаю, стоит использовать минимальное html-обрамление)
— поисковик связывает выданный контент с ajax-запросом и может показать его в выдаче

ckald 13 июл 2011 в 08:59

Ну, я о том же :)

ckald 12 июл 2011 в 19:45

Вы совершенно правы, сейчас что-нибудь придумаю

ckald 12 июл 2011 в 20:06

Думаю, теперь я разобрался с проблемой — как считаете? К слову, пока ковырял, узнал, сколько ошибок можно поместить в 3 строки :)

Nc_Soft 12 июл 2011 в 20:21

Набрал в ие7 amsterdamusic.com.ua/profile/85 получил бесконечные редиректы

ckald 12 июл 2011 в 20:25

Оу, а в восьмом работало. Спасибо, буду разбираться

ckald 12 июл 2011 в 20:27

Не могу воспроизвести. Может, у вас закешировался скрипт?

ckald 12 июл 2011 в 21:06

Мы установили, что, таки-да, кеш виноват.

artishok 12 июл 2011 в 16:21

При переходе по ссылке amsterdamusic.com.ua/#!/profile/88 я вижу профиль музыканта, а при обновлении страницы уже вижу топ5. Да и вообще находясь на любой странице, после обновления я вижу топ5.

ckald 12 июл 2011 в 19:08

Скажите, пожалуйста, что у вас за браузер — обязательно проверю

artishok 12 июл 2011 в 20:16

Opera Next
Версия: 11.50 alpha
Сборка: 1009

not_ice 13 июл 2011 в 02:47

Opera 11.50, сборка 1074 — все ок.

ckald 13 июл 2011 в 09:00

Спасибо. Видимо, билд неудачный

ckald 14 июл 2011 в 12:21

imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

slayerhabr 15 июл 2011 в 20:34

добавьте плиз в README вариант использования в Rails

 class ApplicationController < ActionController::Base

 layout Proc.new { |controller| request.headers['X-PJAX'] ? false : 'application' }

 end

ckald 15 июл 2011 в 20:38

Добавил. Сойдет?

slayerhabr 15 июл 2011 в 20:45

ага, <зануда>в следующий коммит, добавьте пару пробелов перед layout </зануда>

Ekstazi 22 июл 2011 в 11:56

Прикольный плагин. Правда развиваться ему еще есть куда.

ckald 22 июл 2011 в 13:11

С радостью выслушаю ваши предложения.

Ekstazi 22 июл 2011 в 17:02

Ну, в вашем yii варианте расширения не предусмотрен переход по анкорной ссылке на нужную страницу (когда страница открывается в первый раз).

ckald 22 июл 2011 в 17:04

Вы про это: amsterdamusic.com.ua/#!/artists?

Ekstazi 22 июл 2011 в 17:05

Ага, при первом открытии страницы нужен редирект на нужную.

ckald 22 июл 2011 в 17:06

Проверил эту ссылку в Хроме и ИЕ8 — работает. И никто до сих пор не жаловался. Что у вас за браузер?

Ekstazi 22 июл 2011 в 17:08

1) Она работает, но, дважды подгружается контент страницы. Первый раз — главная страница. А потом уже по аякс — та что нужна. Не лучше ли при первом открытии сайта в самом начале выдачи главной страницы делать редирект на нужную?
P.S.: я код смотрел бегло, но, этого не заметил там.

ckald 22 июл 2011 в 17:11

Это и происходит при инициализации pjax. Просто он инициализируется уже после загрузки контента. Это сделано для того, чтобы статично сайт работал и без яваскрипта. Вы видите, как это обойти?

Ekstazi 22 июл 2011 в 17:12

Вижу, поищите в инете, решений уйма есть. Просто пока острая нехватка времени.

Ekstazi 22 июл 2011 в 17:16

Ладно, попробую слету ответить:

//… тут title и остальное

А вообще для подобного hash евания страницы есть jquery bbq, он помощнее вроде + он уже включен в yii.

Ekstazi 22 июл 2011 в 17:19

Блин, забыл про хабрапарсер, вот вариант:


<html>
<head>
<script>if(location.hash!=='')location.href=location.hash.replace('!/','');</script>
//.. Тут тайтл и так далее
</head>
//.. Тут все остальное и сам плагин тоже может быть.
</html>

ckald 22 июл 2011 в 17:22

За BBQ спасибо, надо будет изучить. Но вы ошиблись, я совершенно не знаком с Yii. Я фанат codeigniter и Kohana :)

Возможно, это оправдано. Проблема только в том, что у пользователей не-pushState браузеров постоянно будет меняться формат url — с хешем и без хеша. Спасибо за замечание, поупражняюсь над этим.

Ekstazi 22 июл 2011 в 17:23

Понятно, тогда извиняюсь, просто в соседней форуме тоже эта тема поднялась.

zencd 21 фев 2012 в 19:08

плохо что демки нет

ckald 21 фев 2012 в 20:06

Реализация фактически не отличается от оригинальной – pjax.heroku.com/

zencd 21 фев 2012 в 20:16

Демка не только даёт убедиться что технология работает, но и помогает понять почему не работает у меня. А вобще спасибо.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий