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

Fly AJAX — пишите меньше, имейте больше. Нестандартный AJAX и индексация поисковиками.

Время на прочтение 4 мин
Количество просмотров 5.1K

Обсуждение предыдущей статьи было бурным. Самые ярые любители jQuery, Mootools кричали зачем мол нужен другой велосипед.
В данной статье мы рассмотрим использование техники Fly AJAX. Это одна из нескольких функциональных возможностей, которые не реализованы в ранее указанных больших (и мною уважаемых) фреймворках. Также, в данной статье, мы рассмотрим принципы правильного проектирования и построения сайтов для хорошей индексации с применением AJAX технологии.

«Улётный» AJAX


Технология Fly AJAX — это преобразование «на лету» обычных ссылок в AJAX ссылки. Используя данную технологию, обычную загрузку контента по ссылкам на веб-страницы мы можем легко преобразовать в асинхронную загрузку.

Рассмотрим на примере. Допустим у нас имеется меню сайта

<ul>
  <li><a href="/content/info">Info</a></li>
  <li><a href="/content/download">Download</a></li>
  <li><a href="/content/contact">Contact</a></li>
</ul>
<div id="content-body">Welcome</div>


При обычном подходе, кликая на ссылки меню, мы переходим от одной страницы к другой с полной перезагрузкой.
Применим к данному меню технику Fly AJAX. Одним из вариантов автоматического преобразования обычных ссылок в AJAX ссылки, является использование SRAX.Filter.
SRAX.Filter — как раз и предназначен для «авто-заворачивания», «авто-преобразования» обычных ссылок в AJAX ссылки. Ссылки по заданным критериям отфильтровываются и преобразуются в асинхронные запросы. Рассмотрим пример относительно нашего меню

SRAX.Filter.add({url:'/content/', id:'content-body'})

Все! Теперь кликая на ссылки меню мы переходим от одной страницы к другой асинхронно подгружая контент без полной перезагрузки страниц.

id — определяет ИД элемента, в который необходимо подгрузить контент.
url — определяет часть адреса ссылки, условие фильтрации, по которому проводить отбор ссылок для преобразования.

Список параметров работы SRAX.Filter

  • id — id блока
  • url — ссылка или массив ссылок
  • urlType — 'contain' (по умолчанию) или 'start' или 'end' — соответсвенно содержит, начинается или заканчивается
  • query — строка или массив строк запроса
  • queryType — 'contain' (по умолчанию) или 'start' или 'end' — соответсвенно содержит, начинается или заканчивается
  • join (joinLogic) — логика обьединения url и query — 'or' (по умолчанию) или 'and'
  • changer (urlChanger) — функция изменения обволакиваемой ссылки urlChanger: function(url, owner){return url.replace('index.php', 'mypage.php')}
  • target — true заворачивать ссылки с атрибутом target (_self, _parent, _top, _blank) или false — не заворачивать (по умолчанию)
  • type — если = 'skip', тогда отмена «AJAX заворачивания»; если = 'data', тогда для запроса используется dax, иначе используется hax
  • handler — функция обработки клика, если не указана, тогда используется функция в соответсвии с type
  • + все опции из hax (все опции, которые описывались в предыдущей статье для функции hax)

Важно: адреса следующего типа /content/download?id=1 — для фильтра делятся на две части url=/content/download и query=id=1. Фильтрацию можно проводить по параметрам запроса

SRAX.Filter.add({query:'id=', id:'main-content'})

Также, можно проводить комбинацию условий фильтрации url и query, условие комбинации определяется параметром join.

На нашем сайте имеются примеры разных вариантов фильтрации.

Рекомендую самостоятельно ознакомится с примерами которые используют параметры handler и changer.

Использование ax: атрибутов тегов <a>,<form>,<area>


Вторым способом реализации Fly AJAX является использование ax атрибутов ссылок <a>. Данный подход очень понравился многим разработчикам, которые использую Fullajax в своих проектах. Рассмотрим пример на том же меню
<ul>
  <li><a ax:id="content-body" href="/content/info">Info</a></li>
  <li><a ax:id="content-body" href="/content/download">Download</a></li>
  <li><a ax:id="content-body" href="/content/contact">Contact</a></li>
</ul>
<div id="content-body">Welcome</div>

Все! Опять же, кликая на ссылки меню мы переходим от одной страницы к другой асинхронно подгружая контент без полной перезагрузки страниц.

Подход не стандартный, но оригинальный, так как практически не требует написания ни единой строчки javascript кода. В качестве атрибутов вы можете использовать точно такие же параметры как и для SRAX.Filter, только с префиксом ax: (название префикса по желанию можно настроить).

Одним из сложных моментов при реализации Fly AJAX являлось сохранение функциональности определенных для ссылок событий, т.е. если вы определили событие onclick

<a ax:id='content' href="/mypage" onclick="alert(1)">

произойдет сначала alert, а потом загрузка. Если выполнение onclick вернет false — AJAX запрос не состоится.

Авто-преобразованию подвергаются также теги <form> и <area>.

При желании можно организовать более оптимальную выдачу контента для AJAX запросов. Т.е. отдавать только то, что необходимо заменить на стороне клиента. Определить обычный запрос или AJAX запрос можно проверяя хеадер запроса X-Requested-With=XMLHttpRequest. При наличии такового отдавать меньше. Если нет желания оптимизировать выдачу или нет такой возможности — можно использовать тогда метки блоков контента. Детальнее о данном подходе отдачи контента, который условно называется model2 («один-ко-многим» — один запрос на много блоков), можно ознакомится в отдельном топике на сайте нашего форума. Данный подход детальнее будет рассмотрен в следующих статьях.

AJAX и индексация поисковиками


Исходя из ранее рассмотренного можно легко понять как необходимо строить свои сайты для того чтобы и контент индексировался поисковиками и AJAX работал. Ведь если мы посмотрим на структуру нашего меню, которое приведено в примерах — оно чудесно поддается индексации. А если еще хорошо подумать, то в итоге можно сделать даже большую степень индексации чем при обычном построении. При правильном использовании AJAX позволяет повысить индексацию сайтов!!! Ваууу! И полетели шапки…

Таким образом, техника Fly AJAX позволяет обеспечить нормальную индексацию сайтов поисковиками и при этом использовать AJAX на полую катушку.
В добавок ко всему вы программируете еще «меньше меньшего», а получаете больше.


В следующей статье планируется рассмотреть
  • SRAX.directLink — поддержка прямых AJAX ссылок
  • SRAX.linkEqual — преобразование AJAX ссылок в человеко-понятный вид
Всех благ!!! Спишемся .
Теги:
Хабы:
+69
Комментарии 207
Комментарии Комментарии 207

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн