Список Статей

Полный AJAX. Теория и Примеры. Фишки и Фичи

http://fullajax.ruПо многочисленным просьбам начинающих (и не только) 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 всего этого нет. Зато есть свои другие возможности.

Список основных возможностей:


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

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.

Основное правило:

Все просто, если вы загружаете HTML код, который надо вставлять в страницу используем hax иначе dax.

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


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


Продолжение



Если Бог даст времени и сил, в следующей статье (если тема интересна читателям), планируется осветить ряд вопросов таких как:


Всех благ, спишемся…

UPD1: Некоторые примеры внедрения
Dream Travel — туристическая Компания
Tooglecms — правда еще сыровато, только первая бета.
Datamash.us — виджет платформа

Форум где можно задать вопросы технического характера