Обсуждение предыдущей статьи было бурным. Самые ярые любители 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 ссылок в человеко-понятный вид
.