Как стать автором
Обновить

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

В статье не увидел важного замечания — очень полезно для мобильных сайтов.
прошу прощения, не совсем понял что вы имеете ввиду
Что на мобильниках не работает JS, полагаю
Смотря на каких. Вообще много не от мобильника зависит а от мобильного браузера.
Это уже не мобильник как правило, а смарт или коммуникатор, такой уродливый мини-компьютер с функцией звонков.
да, действительно, наверно это он имел ввиду. Да, яваскрипт работает не во всех мобильных браузерах (сам таким браузером обладаю) а где работает, там приобязательно глючит
Должен существовать только один глобальный обработчик нажатия на ссылки $(“a”).click(…), который и делает всю работу по перегрузке нужных элементов страницы. Если же JavаScript отключен, то этот обработчик просто не срабатывает, и сайт продолжает работать в обычном режиме.

В таком подходе плохо то, что на свежедобавленные ссылки такое поведение вешатся не будет. Стоит использовать
$(document).click(function (e) {
    if (e.target.tagName == 'A') {
        // работаем со ссылкой
    }
});

Ну или jQuery.delegate использовать
прошу прощения, но вижу, что у вас через live и сделано
да да, согласен, это я дал маху в заголовке, на самом деле в коде, как видите не $(«a»).click(), а $(«a»).live()
    // Обработчик на ссылки
    $(selector+":not(.noajax) a:not(.noajax)").live("click.myEvent", function(e){
           ...........
    }
у вас немножко ошибка:
jQuery.fn — аналог jQuery.prototype, то есть оно доступно из this каждого jquery- объекта, например $('div').lego.
В вашем случае эти статические переменные и методы стоит добавлять в jQuery.lego, тогда они не будут добавлятся каждому объекту
и, соответственно такой подход $().lego не очень хорош. надо отделить часть кода, который отвечает за глобальные действия и определить его в $.lego и часть кода, который отвечает за выбранный элемент и определить его в $.fn.lego
Там понимаете, в оригинале есть еще одна функция, сейчас я её скопипастю… Вот:
jQuery.fn.lego = function(e){
	var ret = $(this).parents(".lego").first();
	return ret;
}


Каждый Лего-див имеет класс .lego. Я в попыхах забыл об этом написать. И благодаря этому плагину можно у каждого элемента получит его лего-див, например $("#my_link").lego() — вернет первый родительски легодив, у него можно взять имя и все такое. Т.е. это для того, чтобы в коде знать какой элемент какому лего пренадлежит, допустим чтобы затемнить его или еще что. На самом деле не используется почти, но потенциальная возможность приятна
тогда стоит разделить на глобальные скрипты для всего документа и на локальные для каждого элемента, ато записывать переменные в свойства конструктора — не айс) еще больший не айс — создавать пустой элемент каждый раз вместо использования статических переменных
аха, я понял, да, действительно. Надо повторно используемые элементы вынести статическими. Мне на самом деле в JavaScript-е немного прокачаться не мешало бы. Очень много непонятного…
shock@jabber.com.ua — спрашивайте, если что
Может быть, тогда и перестанете его не любить )
Также могу порекомендовать книгу, которую проще всего найти по аббревиатуре SICP, в т.ч. на русском. Она не о конкретном языке, а о программировании вообще, но на JS научиться нормально программировать поможет однозначно.
Абсолютные ссылки не обрабатывем

Сюда можно было бы еще добавить проверку на email:admin@example.com, а так же ftp, и другие протоколы)
окей, заметано, буду признателен. Проверочку тоже добавлю
+ проверку на тот случай, если по ссылке отдается скачиваемый файл (архив там или еще какое непотребство)
Остается вопрос, нафига это надо? Этакий браузер в браузере? Зачем? Чем это лучше обычного перехода по страницам?
Посмотрите код хабра и поймете ;)
Всему свое место должно быть. Если речь о комментах на хабре, то их ajax подгрузка тут как раз к месту.
А у автора я вижу идею использования ajax-а ради ajax-а.
На хабре, многие вещи сделаны на ajax, посмотрите внимательно же ;)
Я думаю это станет понятным, если вы пощелкаете сайт микросеть.рф. Там в самом верху есть кнопочка переключения режимов («надежный» — это как обычно, переход по страницам, и «быстрый» — это с перезагрузкой только текущего элемента). Просто получается быстрее. Особенно если вы листаете анекдоты в маленьком блочке: следующи, следующи… Одно дело вам будет загружаться вся страница с шапкой там и со всеми делами, а другое дело только текст следующего анекдота. И еще есть такой момент — браузер тратит какое-то время на построение дерева элементов, и если вы не заставляете его стоить все дерево целиком, а только вставляете один див — получается быстрее.

Еще один плюс — возможность кэшировать на стороне браузера некоторые блоки, особенно это помогает в листалке фотографий — когда нажимаете «предыдущая фотография», то она открывается мгновенно, а в случае с обычным режимом есть некоторая задержка. Как говориться мелочь, а приятно
mojura.110mb.com/ — ещё быстрее и без каких либо аяксов
что у вас за поебень наверху из яваскипт кода?
выложи чтоли скрин
С таким началом, что ли: This block of style rules is inserted by AdBlock?
Еще одно из достоинств: экономия на трафике.
Еще бы ко всему этому какой-нибудь механизм, который будет автоматически формировать красивые URL-ы. То есть, чтобы в случае асинхронного доступа по адресу site.com/page/sub-page/, адрес лишь менялся на site.com/#/page/sub-page/.
И кнопки браузера будут работать.
Кнопки назад/вперед браузера будут работать?
Если страница длинная, то клик по нижней ссылке приведет при аякс запросе к перемотке фокуса наверх?
Да, можете сами проверить, там последний загруженный урл сохраняется в document.location.hash — и когда вы нажимаете назад — он изменяется. Скрипт замечает изменение hash и загружает нужный блок.

А по поводу перемотки… Я пробовал сначала перематывать при переходах — но потом отказался. Не приятно когда страница дергается вверх. Хочется оставаться в той же позиции. Хотя для длинных страниц может это более ожидаемое поведение
НЛО прилетело и опубликовало эту надпись здесь
Да, это минус, спору нет
>>Да, можете сами проверить, там последний загруженный урл сохраняется в document.location.hash

создатели осла так не думают
пример реализации подобного механизма на базе Fullajax. В идеале можно натянуть на любую CMS, переписывать на сервере и клиенте ничего не нужно, только добавить некоторую логику для возможности «урезанной» выдачи при АЯКС запросах.
Гыыы, прикольная либа :) Спасибо, скачал, изучаю. Масюля такая. Надо автору написать, может идей каких подкинет.

Да да, нужно чтобы можно было получить любую ветку дерева контроллеров отдельно, без всего предшествующего и последующего выводов. Тогда можно не только на своем сайте блоки как хочешь размещать, но и встраивать в сайты партнеров, без дополнительной писанины — так на каждом блоке кнопочка «встроить себе на сайт» и опа, у тебя информер появился. А ваще в идале зашел на сайт друга, перетащил мышкой блочек себи и опа, он у тебя. Я думаю браузеры скоро дотумкают до драг энд дропа. Получится типа весь интернет — один лего конструктор, мать его ити. Зуб даю так и будет
>Я думаю браузеры скоро дотумкают до драг энд дропа.

В HTML5 уже додумали.
Я думаю браузеры скоро дотумкают до драг энд дропа

Ну так Хром и FF уже дотумкали, по одноименному тегу можно найти массу интересного: drag-and-drop
… все таки как полезно читать хабр, твою мать!
sirus и является автором этой библиотеки ;)
Оу… покорнейше прошу меня простить, черт, я не знал… Уважаю ваш труд и все такое
НЛО прилетело и опубликовало эту надпись здесь
Подобный принцип работы сайта на Zend_Framework реализуется тремя строчками, давно этим пользуюсь. И как мне кажется, более красиво чем у вас)
В том-то и дело, что у автора целый велосипед на тему mvc.
Предлагаете пользоваться Зенд? Хмм… может быть. Приведите, пожалуйста, пример этих трех строчек, для сравнения. Меня уже попрекали изобретением велосипедов, а я все равно продолжаю этим заниматься. Но факт в том, что иногда они получаются лучше других
В зенде смотрите mvc архитектуру в купе с помощником (action helper) Ajax, который при Ajax запросе меняет файл вида.
В велосипедах нет ничего плохого кроме того, что на продакшене предпочтение стоит отдавать проверенным и общераспространенным решениям. Распространенность играет ключевую роль в плане совместной работы и сопровождения кода.
Я вас понимаю, сам этим раньше занимался) Я считаю это нормально и через это должен пройти каждый нормльный программист, это своего рода тренировка. Полученые таким образом знания мне часто помогают в работе.

А по поводу примера, есть как минимум два решения:
Одно из решений, в класс вашего базового контроллера (от которого наследуются все остальные) просто добавить такой код. Лучше всего в метод init() — своего рода конструктор в контроллерах Zend'a.
if ($this->getRequest()->isXmlHttpRequest()) {
    $this->getHelper('layout')->disableLayout();
}

Немного поясню, если к нам пришёл асинхронный запрос (проверяется это наличием заголовка 'X-Requested-With: XmlHttpRequest' в принимаемом запросе) то мы отключаем глобальный шаблон и отдаём только шаблон который отвечает за основной контент.
И немного JavaScript:
$('a.ajax').click(function(){
    $.get($(this).attr('href'), function(data) {
       $('.result').html(data);
    });
});
Чтобы, если JavaScript включен, блоки сайта перегружались AJAX-сом, а если JavaScript-а нет, то происходил просто переход на новую страницу?


Какая глупость. Не нужно пихать AJAX куда ни попадя.
ИМХО, автор переизобрел unobtrusive javascript и REST.
И как подобные посты вылезают на главную-то?
Нет, похоже автор переизобрел AJAX :)
А заодно изобрел и новый PHP фреймворк с новым MVC подходом.

Остается только предложить пойти на www.books.ru/shop/search?search_type=+&query=ajax
благодарю, предпочитаю думать своей головой. Пусть изобрел велосипед, но зато маленький и я знаю для чего нужна каждая строчка его кода
Честное слово. Много книг хороших и разных. В некоторых все на столько четко и детально (порой даже слишком) описано, что и вопросов никаких не останется. Ведь AJAX появился не сегодня и не вчера. Философия подхода уже давно пережевана десятки раз.

А современные PHP фреймворки предоставляют средства для упрощения жизни с AJAX.

Тем не менее, топик стал довольно популярным. Это знак того, что не для всех все так прозрачно… Либо просто люди книг не читают…

За что выражаю благодарность, так это за пропаганду ненавязчивого JS. Только я бы не стал вешать на все ссылки поголовно. Лучше определить их каким-либо классом.
graceful degradation ajax
По моему мнению отключенный javascript большая утопия в наш современный век, я имею ввиду обычные ПК, т.е. телефоны и прочее в расчет не берем. Како процент пользователей без поддержки JS, 0,1%
поисковики
прочитал, возник вопрос что если js еще не успел подгрузиться и юзер кликает по ссылке, будет ли переход?
Очень резонный вопрос! Если началась загрузка блока — его область затеняется полупрозрачным белым дивом («белая плева» в коде). Она не дает кликать по ссылкам, пока идет загрузка. Клянусь придумал сам, потом пошел вконтакте и увидел у них то же самое, обидно было :(. А потом оказалось так делают все нормальные сайты, ну кроме гугла — он затеняет и дает кликать по ссылкам сквозь плеву. Да гугл вообще неудачники ИМХО.
> Не знаю, как ты, дорогой хаброчтец, но я, твою мать, лучше продам свою душу дьяволу, чем буду дебажить свой JavaScript во всех многообразиях браузеров!
Use jQuery, man!
thanks man, если б не жиквери, я бы умер от утери нервных клеток уже пару лет назад
А чтобы получить вывод только нужного Lego-объекта, нам всего лишь нужно дописать параметр ajax в адресную строку
// например:
// example.ru/?LegoSite=fotos&ajax={имя_лего_вывод_которого_нам_надо_получить}

JQuery умеет посылать специальный заголовок (кажется X-Requested-With), о том, что выполняется AJAX запрос, поэтому не нужно указывать дополнительный избыточный GET-параметр. Эту особенность используется ASP.NET MVC.
Во во, вот это я и искал. Черт возьми, почему-то не получилось у меня так, не помню почему. Надо еще раз попробовать с заголовком… Убей не помню…
Как как пример, почему не получилось:
PHP не может читать заголовки, если он не установлен, как модуль Apache.
X-REQUESTED-WITH
Спасибо всем за коменты, побегу на работу…
на медленном интернете — при клике по нескольким ссылкам — глючит
«Думали ли Вы когда-нибудь о том, чтобы Ваш сайт одинаково хорошо работал с включенным JavaScript-ом и без JavaScript-а?»
— я в таких случаях банально делаю полнофункциональный сайт без яваскрипта вообще, а потом навешиваю красивости и аяксы. для цмс которую я использую (Contao) есть хороший простенький php-скрипт, который позволяет через себя вызывать нужные модули и контентные элементы с параметрами, не запрашивая целую страницу. и всё в шоколаде
Вам бы еще озаботится нормальными URL, потому как время index.php?million_bukv несколько прошло…
// белая плева, закрывающая загружаемый блок
этот комментарий в коде выдавил у меня слезу!
Такой интерактив конечно круто, но подойдет он не для каждого сайта (ИМХО). Т.к. будут проблемы с SEO ссылки, со сторонних ресурсов (хотя конечно не все) будут идти с #, а они не обработаются ПС — будут вести не на релевантные страницы.
не не, у каждой ссылки есть её «нормальный аналог», т.е. ссылку конечно надо давать на него (ну посмотрите поиск в кконтакте тоже использует #bla-bla-bla) та же фигня, но ссылку лучше давать без решетки конечно. Т.е. то что после решетки, перенести в место, сразу после домена
не не, у каждой ссылки есть её «нормальный аналог», т.е. ссылку конечно надо давать на него (ну посмотрите поиск в кконтакте тоже использует #bla-bla-bla) та же фигня, но ссылку лучше давать без решетки конечно. Т.е. то что после решетки, перенести в место, сразу после домена
Приведу пример.
Есть допустим медиа ресурс (новости, статьи и т.д.). Есть раздел site.ru/news/ у него будут Ajax ссылки site.ru/news/#page/1/. Пользователь копирует ссылку из адресной строки и пуляет ее в свой блог. Поисковый бот видит ссылку site.ru/news/#page/1/ и дает считает ее ссылкой на — site.ru/news/, но мы хотели не этого.

Вот, как то так. Идеально бы было если ПС ввели какой-то маркер (Google вроде предлагал что то) и если в ссылке его находили, то удаляли и получали обычную ссылку.
Все просто, если ссылка содержит хеш, то нужно её из вида:
site.ru/news/#/some/other/path
превращать в
site.ru/some/other/path

т.е. отсекать все что между доменом и решеткой, включая решетку.

и отображать его внизу страницы (ссылка на эту страницу: site.ru/some/other/path)
Пояснив пользователям, что если они помещают где-то на других проекта ссылки, то нужно использовать её
А вообще, по мне так лучше бы браузеры использовали то, что после решетки как путь элементов, загруженных AJAX-ом. Все таки это актуальнее чем переход по меткам.

А еще лучше чтобы браузеры давали менять адресную строку из яваскрипта, не совершая переход. Тогда и проблема красивых урлов решилась бы сама собой. Есть то, что видит пользователь — а есть то что на самом деле. И чем они только думают
прикол в демке, если драгнуть загруженную большую картинку, то все хинты мигнут два раза, как будто я два раза быстро нажал CTRL

Все может быть — глюки есть, их не может не быть. Только чёт повторить не поучается, и браузер ваш не узрел. Я так понял нужно потащить картинко?
на картинке вместо той фотки что я загрузил большой серый блок (замазал), его (фото) я просто потащил немного и отпустил
ну это не важно, просто интересный артефакт)
А браузер то какой?
Кстати фото вы загружаете принерпристойное, мать вашу
но красивое
чёрт, покажите же всем!
там сиськи
Зарегистрируйтесь на Хабре , чтобы оставить комментарий