По многочисленным просьбам начинающих (и не только) AJAX разработчиков, решил выделить часть своего времени для описания некоторых хитростей и приемов, которыми пользуюсь при построении сложных, динамических веб-приложений. Статья представляет из себя смесь теоретических выкладок и практических примеров.
Наибольшие трудности при построении сайтов c применением AJAX возникают при реализации механизма AHAH (Asynchronous HTML and HTTP). Особенно выполнение на лету подгружаемых Javascript-ов. Также есть куча дополнительного «гемороя» при разработке AJAX сайтов и веб-приложений. Вы можете ознакомится с детальным описанием некоторых существующих проблем. Из-за указанных сложностей, многие разработчики отказываются от более насыщенного внедрения AJAX.
Однако, мало кто знает, что перечисленные проблемы можно решить. Тем более уже имеется ряд решений, которые позволяет с легкостью обходить проблемные и узкие места при разработке сложных AJAX веб-приложений, а также при динамической подгрузке HTML страниц со встроенными скриптами.
Одним из таких решений является Fullajax — технология построения сайтов и веб-приложений с использованием AJAX. Это совокупность алгоритмов, подходов, правил и методов максимального внедрения всей мощности AJAX & AHAH. Технология нацелена на уменьшение сложности и расширения узконаправленности области применения AJAX.
Fullajax выражен в отдельной независимой библиотеке. Это не аналог jQuery, Mootools, ExtJS, Prototype, YASS. Однако, совместное использование с современными javascript библиотеками не противоречит и не вызывает конфликтов, а наоброт дополняет друг друга. Библиотека предназначена сугубо для коммуникации. Весь упор сделан на удобство, гибкость и в то же время простоту в использовании методов и функций для обмена данными между клиентом и сервером. В ранее перечисленных библиотеках имеется DOM навигация и манипуляция, различные визуальные эффекты, наборы визуальных компонентов. В Fullajax всего этого нет. Зато есть свои другие возможности.
Конечно, за одну статью рассказать обо всем, тем более с примерами и в деталях не получится, так как накладно и по времени и по количеству букв.
В данной статье речь пойдет о наиболее важных функциональных возможностях библиотеки. Планируется написать серию статей. Начнем с простейшего.
Функция которая вызывается сразу при готовности DOM. Такая функция существует во всех современных жабаскриптовых библиотеках.
Теперь непосредственно о коммуникационных функциях.
Для работы с AJAX запросами в библиотеке реализованы две функции dax и hax.
данные всех полей (input, textarea, select, ...) с формы у которой id='myform' будут автоматически собраны и отправлены на url=myurl методом post
id — определяет внутренний идентификатор потока, предназначен для разделения потоков запроса к серверу, в один и тот же момент времени не может существовать два потока (запроса) с одинаковыми id, следующий запрос отменяет предыдущий. Использование id также позволяет повторно использовать созданные в памяти объекты.
~70% всего кода библиотеки — это реализация работы hax. Эта функция выполняет все сложные операции по обработке разных вариантов HTML кода. Можно сказать hax — это полноценное ядро анализа и обработки HTML документов. Она автоматически выделяет и применяет стили и жабаскрипты, сама регламентирует их последовательность загрузки, метод загрузки ручной (через dax) или автоматический (отдавая процесс загрузки браузеру), реализацию истории AJAX навигации, обработку document.write, window.onload, автоматическое изменение title, поддержка прямых AJAX ссылок, другое.
Рассмотри внутренний алгоритм работы hax. При получении html ответа производится анализ документа и парсинг стилей, скриптов. Если стили и скрипты внешние производится их автоматическая рекурсивная дозагрузка. Рекурсивная означает если внутри дозагружаемых скриптов, стилей есть еще внешние ссылки процес повторяется. В случае если скрипты, стили с другого домена, процесс загрузки тогда отдается браузеру и последующий анализ таких скриптов, стилей не производится.
Для реализации четкой и стабильной работы при обработке сложных HTML страниц был разработан алгоритм контроля подгружаемости и очередности выполнения скриптов, стилей и линков, который снимает с браузеров эти обязанности. За счет этого реализована хорошая, стабильная, а главное одинаково предсказуемая работы AHAH в основных веб-браузерах.
Одним из «камней в сандале» является совместное использование AJAX и document.write. При появлении в скриптах document.write — работа сайта с применением AJAX (AHAH) по умолчанию невозможна. Так как document.write можно использовать только до окончания потока вывода основной страницы. В противном случае — контент страницы просто напросто стирается. В Fullajax функция document.write переопределена, таким образом что без ошибок выполняется то что было задумано программистом. Алгоритм эмуляции этой функции был одним из самых сложных моментов при разработке библиотеки.
Также одним из сложнейших функционалов библиотеки является реализация кроссбраузерной истории AJAX навигации. В конце концов, в Fullajax работа с AJAX историей сводится к определению одного параметра вкл/выкл.
В элемент с id='my-div' будет загружена страница 'index.html' с использованием AJAX истории.
В элемент с id='my-div' будет загружена страница 'index.html' без использованием AJAX истории, после загрузки вылетит alert.
Если Бог даст времени и сил, в следующей статье (если тема интересна читателям), планируется осветить ряд вопросов таких как:
Всех благ, спишемся…
UPD1: Некоторые примеры внедрения
Dream Travel — туристическая Компания
Tooglecms — правда еще сыровато, только первая бета.
Datamash.us — виджет платформа
Форум где можно задать вопросы технического характера
Наибольшие трудности при построении сайтов c применением AJAX возникают при реализации механизма AHAH (Asynchronous HTML and HTTP). Особенно выполнение на лету подгружаемых Javascript-ов. Также есть куча дополнительного «гемороя» при разработке AJAX сайтов и веб-приложений. Вы можете ознакомится с детальным описанием некоторых существующих проблем. Из-за указанных сложностей, многие разработчики отказываются от более насыщенного внедрения AJAX.
Однако, мало кто знает, что перечисленные проблемы можно решить. Тем более уже имеется ряд решений, которые позволяет с легкостью обходить проблемные и узкие места при разработке сложных AJAX веб-приложений, а также при динамической подгрузке HTML страниц со встроенными скриптами.
Одним из таких решений является Fullajax — технология построения сайтов и веб-приложений с использованием AJAX. Это совокупность алгоритмов, подходов, правил и методов максимального внедрения всей мощности AJAX & AHAH. Технология нацелена на уменьшение сложности и расширения узконаправленности области применения AJAX.
Fullajax выражен в отдельной независимой библиотеке. Это не аналог jQuery, Mootools, ExtJS, Prototype, YASS. Однако, совместное использование с современными javascript библиотеками не противоречит и не вызывает конфликтов, а наоброт дополняет друг друга. Библиотека предназначена сугубо для коммуникации. Весь упор сделан на удобство, гибкость и в то же время простоту в использовании методов и функций для обмена данными между клиентом и сервером. В ранее перечисленных библиотеках имеется DOM навигация и манипуляция, различные визуальные эффекты, наборы визуальных компонентов. В Fullajax всего этого нет. Зато есть свои другие возможности.
Список основных возможностей:
- реализация простого интерфейса коммуникации
- Fly AJAX (преобразование в AJAX «налету»), AJAX-фильтр — ссылки и формы по указанным критериям автоматически превращаются в AJAX
- возможность индексация поисковыми роботами как на обычном сайте
- парсинг и выполнение скриптов, линков и стилей в контенте динамически подгружаемых веб-страниц
- акселератор (ускоритель) загрузки скриптов — параллельная загрузка с последовательным применением
- несколько уровней кэширования HTML страниц, скриптов и стилей
- возможность отключения переинициализации скриптовых функций (повторного исполнения) — повышает производительность, экономит вычислительные ресурсы и оперативную память
- поддержка прямых ссылок на «AJAX сгенерированные» веб-страницы
- реализация истории AJAX навигации (кнопки браузера «Назад» и «Вперед»)
- полноценная обработка document.write и <frameset>; в каждом потоке динамически подгружаемых страниц
- поддержка событий onload и onunload тега <body> и window.onload
- изменения TITLE в соответствии с подгружаемым контентом
- эмуляция мультипоточной работы, раздельная история для каждого потока
- корректная работа счетчиков
- обновление баннеров с каждым обновлением информации
- AJAX загрузка файлов на сервер (upload) без перезагрузки
- реализация простой модели событий
- возможность использования локального хранилища flash storage
- две модели запроса HTML страниц — «один-к-одному» и «один-ко-многим» (один запрос — ответ ко многим блокам)
- поддержка отработки на локальной файловой системе
- возможность совместного использования стандартных якорей и AJAX ссылок
Конечно, за одну статью рассказать обо всем, тем более с примерами и в деталях не получится, так как накладно и по времени и по количеству букв.
В данной статье речь пойдет о наиболее важных функциональных возможностях библиотеки. Планируется написать серию статей. Начнем с простейшего.
1. доступ к элементу по id
<div id="my-div"></div>
<script>
id('my-div').innerHTML = 'test1';
//или
SRAX.get('my-div').innerHTML = 'test2';
</script>
2. SRAX.onReady — готовность DOM
Функция которая вызывается сразу при готовности DOM. Такая функция существует во всех современных жабаскриптовых библиотеках.
SRAX.onReady(function(){alert(1)})
function mytest(){
document.body.appendChild(document.cereateElement('div')).innerHTML = 'New Div';
}
SRAX.onReady(mytest)
Теперь непосредственно о коммуникационных функциях.
Для работы с AJAX запросами в библиотеке реализованы две функции dax и hax.
Основное правило:
- для запроса текстовых данных, xml, json, и подобных необходимо использовать dax (DataAjaX)
- для запроса html необходимо использовать hax (HtmlAjaX) — этот метод и есть поддержка AHAH (Asynchronous HTML and HTTP)
3. Пример использования dax
dax({url:'myurl', id:'save-data', form:'myform', method:'post', cb:function(resp, cbo){
alert(resp.text || resp.xml)
}})данные всех полей (input, textarea, select, ...) с формы у которой id='myform' будут автоматически собраны и отправлены на url=myurl методом post
id — определяет внутренний идентификатор потока, предназначен для разделения потоков запроса к серверу, в один и тот же момент времени не может существовать два потока (запроса) с одинаковыми id, следующий запрос отменяет предыдущий. Использование id также позволяет повторно использовать созданные в памяти объекты.
Список опций работы dax
- url/src — URL запроса
- id — внутренний id потока
- method — метода запроса данных post или get (по умолчанию)
- form — id формы, сама форма, id элемента или сам элемент, с которого необходимо собрать параметры
- params — строка параметров, которые необходимо включить в запрос (name=val1&name=val2)
- callback/cb — функция обратного вызова
- callbackOps/cbo — опции, которые передаются в функцию обратного вызова
- destroy — флаг авто удаления процесса из памяти после окончания запроса true или false (по умолчанию)
- anticache/nocache — флаг антикеширования true или false (по умолчанию)
- async — флаг выполнения асинхронного запроса true (по умолчанию) или false
- xml — XML, эмуляция ответа, при наличии данного параметра запрос данных c сервера не осуществляется
- text — текст, эмуляция ответа, при наличии данного параметра запрос данных c сервера не осуществляется
- user — username, для подключения требующего имя юзера
- pswd — password, для подключения требующего пароль
- headers — массив header-ов из обьектов {ключ: значение}, которые необходимо передать на сервер. пример -> headers:[{Etag: '123'}, {'Accept-Encoding': 'gzip,deflate'}]
- loader — лоадер-индикатор, если не определен — используется лоадер по умолчанию
- storage — флаг использования локального хранилища true (по умолчанию) или false — действует только при подключении SRAX.Storage
- etag — флаг использования Etag для идентификации новизны данных в локальном хранилище true (по умолчанию) или false — действует только при подключении SRAX.Storage
4. Пример использования hax
~70% всего кода библиотеки — это реализация работы hax. Эта функция выполняет все сложные операции по обработке разных вариантов HTML кода. Можно сказать hax — это полноценное ядро анализа и обработки HTML документов. Она автоматически выделяет и применяет стили и жабаскрипты, сама регламентирует их последовательность загрузки, метод загрузки ручной (через dax) или автоматический (отдавая процесс загрузки браузеру), реализацию истории AJAX навигации, обработку document.write, window.onload, автоматическое изменение title, поддержка прямых AJAX ссылок, другое.
Рассмотри внутренний алгоритм работы hax. При получении html ответа производится анализ документа и парсинг стилей, скриптов. Если стили и скрипты внешние производится их автоматическая рекурсивная дозагрузка. Рекурсивная означает если внутри дозагружаемых скриптов, стилей есть еще внешние ссылки процес повторяется. В случае если скрипты, стили с другого домена, процесс загрузки тогда отдается браузеру и последующий анализ таких скриптов, стилей не производится.
Для реализации четкой и стабильной работы при обработке сложных HTML страниц был разработан алгоритм контроля подгружаемости и очередности выполнения скриптов, стилей и линков, который снимает с браузеров эти обязанности. За счет этого реализована хорошая, стабильная, а главное одинаково предсказуемая работы AHAH в основных веб-браузерах.
Одним из «камней в сандале» является совместное использование AJAX и document.write. При появлении в скриптах document.write — работа сайта с применением AJAX (AHAH) по умолчанию невозможна. Так как document.write можно использовать только до окончания потока вывода основной страницы. В противном случае — контент страницы просто напросто стирается. В Fullajax функция document.write переопределена, таким образом что без ошибок выполняется то что было задумано программистом. Алгоритм эмуляции этой функции был одним из самых сложных моментов при разработке библиотеки.
Также одним из сложнейших функционалов библиотеки является реализация кроссбраузерной истории AJAX навигации. В конце концов, в Fullajax работа с AJAX историей сводится к определению одного параметра вкл/выкл.
Примеры работы с hax:
hax({url:'index.html', id:'my-div'})В элемент с id='my-div' будет загружена страница 'index.html' с использованием AJAX истории.
hax({url:'index.html', id:'my-div', nohistory:1, onload:function(){
alert('Hey Bingo!!')
}})В элемент с id='my-div' будет загружена страница 'index.html' без использованием AJAX истории, после загрузки вылетит alert.
Список опций работы hax
- url/src — URL запроса
- id — id родительского элемента
- method — метода запроса данных post или get (по умолчанию)
- form — id формы, сама форма, id элемента или сам элемент, с которого необходимо собрать параметры
- params — строка параметров, которые необходимо включиють в запрос (name=val1&name=val2)
- callback/cb — функция обратного вызова
- callbackOps/cbo — опции, которые передаются в функцию обратного вызова
- nohistory (noHistory)- флаг использования истории AJAX навигации, по умолчанию false — т.е. история включена
- rc — использовать (true) или не использовать (false — по умолчанию) коррекцию путей относительных ссылок
- overwrite — флаг true или false (по умолчанию) перезаписи событий onclick и onsubmit при Fly AJAX (по умолчанию — функции на событиях onclick и onsubmit не перезаписываются, а дополняются)
- destroy — флаг авто удаления процесса из памяти после окончания запроса
- html — HTML текст, эмуляция ответа, при наличии данного параметра запрос данных c сервера не осуществляется
- anticache/nocache — флаг антикеширования true или false (по умолчанию)
- startpage — признак первой страницы истории true или false (по умолчанию)
- async — флаг выполнения асинхронного запроса true (по умолчанию) или false
- historycache — флаг использования кеша истории true или false (по умолчанию используется USE_HISTORY_CACHE)
- seal — флаг «изоляции» true или false (по умолчанию) — используется для решения конфликтов css стилей
- user — username, для подключения требующего имя юзера
- pswd — password, для подключения требующего пароль
- headers — массив header-ов из обьектов {ключ: значение}, которые необходимо передать на сервер. пример -> headers:[{Etag: '123'}, {'Accept-Encoding': 'gzip,deflate'}]
- add — флаг true или false (по умолчанию), определяет принцип добавления подгружаемого контента в родительский элемент: перезапись (false) или добавление (true)
- onload — функция, которая вызывается после полной загрузки контента в элемент
- loader — лоадер-индикатор, если не определен — используется лоадер по умолчанию
- notitle — флаг true или false (по умолчанию), отключает авто-изменение title
- onerror — функция, которая вызывается в случае ошибки загрузки контента
- storage — флаг использования локального хранилища true (по умолчанию) или false — действует только при подключении SRAX.Storage
- etag — флаг использования Etag для идентификации новизны данных в локальном хранилище true (по умолчанию) или false — действует только при подключении SRAX.Storage
Продолжение
Если Бог даст времени и сил, в следующей статье (если тема интересна читателям), планируется осветить ряд вопросов таких как:
- Filter (Fly AJAX) — принципы и примеры автоматического «заворачивания» простых ссылок в AJAX ссылки
- directLink — поддержка прямых AJAX ссылок
- linkEqual — преобразование AJAX ссылок в человеко-понятный вид
- addScript — динамическое добавление скриптов (даже с document.write)
- оптимизация загрузки скриптов, алгоритмы работы Fullajax c обработкой скриптов
- addCss, addStyle — динамическое добавление стилей
- Storage — локальное хранилище на основе Flash
- Anchor — возможность совместного использования стандартных якорей и AJAX ссылок (уникальная разработка)
- model2Marker — запрос один-ко-многим (один запрос, авто заполнение нескольких разных элементов)
- семейство ax: атрибутов
- Effect — функция для применения эффектов обновления HTML страниц
- Include — реализация тега <include src=«index.html»></include>
- Uploader — квази-AJAX аплоадер файлов
- addEventsListener — добавления объектам интерфейса модели событий
- Default — параметры работы по умолчанию
- преимущества и недостатки AHAH сайтов перед обычными
Всех благ, спишемся…
UPD1: Некоторые примеры внедрения
Dream Travel — туристическая Компания
Tooglecms — правда еще сыровато, только первая бета.
Datamash.us — виджет платформа
Форум где можно задать вопросы технического характера
