Fullajax Support - AJAX + AHAH
Сентября 10, 2010, 04:25:05 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
 
   Начало   Помощь Поиск Войти Регистрация  
Страниц: [1]
  Печать  
Автор Тема: Руководство по Fullajax  (Прочитано 8704 раз)
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« : Марта 03, 2009, 21:21:20 »

Предисловие

Технология Fullajax дает возможность web разработчикам использовать Ajax на полную мощь.
Блогадоря богатому функционалу Fullajax, любое веб приложение или сайт любой сложности могут полноценно работать с Ajax.

Библиотека Fullajax имеет функции как упрощающие внедрение ajax в ваше веб приложение или сайт, так и расширяющие, открывая новые возможности и подходы.

За счет использования фильтрации ссылок на лету или Fly Ajax, и других возможностей, подключение Fullajax к вашему проекту производится быстро и легко.

Fullajax не требует глубоких знаний языков программирования для того чтобы подключить и использовать уже его сейчас !
Для простого использования, достаточно скачать библиотеку, прописать несколько строк в нужном месте и наслаждаться.

Для более сложного использования, желательно иметь небольшие навыки работы как с javascript так и с любым серверным языком.



Перечень документации

« Последнее редактирование: Апреля 06, 2009, 16:09:15 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #1 : Марта 03, 2009, 22:11:01 »

Для простого использования, подключение Fullajax будет иметь следующие шаги:

1 - Скачайте самую последнюю версию библиотеки Fullajax со страницы загрузки.
2 - Распакуйте полученный архив.
3 - Загрузите файл "obf.fullajax.js" (который находится в папке "obf") к себе на фтп, где расположен ваш сайт.
4 - Пропишите в вашем шаблоне сайта, между тегами "<head>" следующую строчку:
Код
html4strict:
 
<script type="text/javascript" src="path/obf.fullajax.js" language="JavaScript">
где: path - путь до файла obf.fullajax.js

5 - Пропишите после этой строчки следуещее:
Код
javascript:
 
<javascript>
   SRAX.Filter.add ({url:'test', id:'test-id'})
</javascript>

Теперь все ссылки которые начинаются с "test" будут зафильтрованы, и навигация по ним, будет загружать данные в элемент у которого id="test-id";

Например:
Цитировать
Код
html4strict:
 
<div id="test-id"></div>
<a href="test.html">test</a>
Убедитесь что у вас есть ссылки href которых содержит "test" и на странице существует элемент с id = "test-id".

Это самый простой способ, который использует SRAX.Filter.

Второй способ, для выборочных ссылок.
Можно как бы сказать какие ссылки завернуть и куда загрузить данные:

После шага №4, найдите ссылку которую нужно завернуть.
Пропишите в ней параметр:
Код
html4strict:
 
ax:id="test-id"
где test-id id вашего элемента в который будут загружены данные.

Например:
Цитировать
Код
html4strict:
 
<div id="test-id"></div>
<a href="test.html" ax:id="test-id">test</a>
Убедитесь что существует элемент с id = "test-id".

Познакомтесь подробнее
« Последнее редактирование: Апреля 07, 2009, 09:29:23 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #2 : Марта 05, 2009, 21:27:27 »

Первоначальные настройки которые могут вам понадобиться.

Все описанные ниже настройки прописываются в нутри тега <script>

Кеширование:
Код
javascript:
 
SRAX.Default.HAX_ANTICACHE=true
запрет кеширования браузером HTML

Код
javascript:
 
SRAX.Default.HAX_ANTICACHE=false
кеширование запрошенных HTML страниц регламентируется браузером

Отменяем заворачивание внешних ссылок:
Код
javascript:
 
SRAX.Filter.on('beforewrap', function(ops){return !SRAX.isXss(ops.el.href || ops.el.action)})

Настроим адресную строку:
SRAX.linkEqual позволяет преобразовать url в адресной строке в более читаемый вид.
пример для #:ax:content:/about.php
Код
javascript:
 
SRAX.linkEqual[':ax:content'] = '[fullajax-very-cool'];
или просто так
Код
javascript:
 
SRAX.linkEqual[':ax:content:/'] = ':';
« Последнее редактирование: Марта 09, 2009, 20:43:05 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #3 : Марта 12, 2009, 22:40:45 »

Одна из основных возможностей Fullajax ― программируете как обычно, а подключив нашу библиотеку получаете AJAX. Это достигается за счет специально разработанного механизма фильтрации: ссылки по заданным критериям автоматически превращаются в AJAX. Область применения не ограничена: в простых сайтах, на системах управления, в порталах, везде. При подключении Fullajax — Ваш сайт станет настоящим современным Веб-приложением.

Основные возможности:

  • Динамические загрузка контента и обмен данными, реализация простого интерфейса коммуникации
  • Корректная работа под основными браузерами (Internet Explorer, Firefox, Opera, Safari, Wyzo)
  • Быстрое и удобное подключение к любому типу сайтов (системе управления и порталу)
  • Индексация поисковыми роботами как на обычном сайте! Проверено 100%!
  • Прямые ссылки на «AJAX сгенерированные» веб-страницы
  • Реализация истории для кнопок браузера «Назад» и «Вперед»
  • Независимость от серверного языка программирования (PHP, Java, ASP, Perl, и пр.)
  • Корректная работа счетчиков
  • Обновление баннеров с каждым обновлением информации
  • Функция изменения TITLE
  • Мультипоточность, раздельная история для каждого потока
  • Полная поддержка GET и POST запросов
  • Парсинг и выполнение скриптов, линков и стилей в контенте динамически подгружаемых веб-страниц
  • Триггер контента, реализация связи меню с динамическим контентом
  • Несколько уровней кэширования HTML, скриптов и стилей
  • Отключение переинициализации скриптовых функций (повторного исполнения) — повышает производительность, экономит вычислительные ресурсы и оперативную память
  • AJAX загрузка файлов на сервер (upload) без перезагрузки
  • Fly AJAX (преобразование в AJAX «налету»), AJAX-фильтр -  ссылки и формы по указанным критериям автоматически превращаются в AJAX
  • Акселератор (ускоритель) загрузки скриптов — параллельная загрузка с последовательным применением
  • Реализация простой модели событий
  • Полноценная обработка document.write и <frameset> в каждом потоке динамически подгружаемых страниц
  • Поддержка событий onload и onunload тега <body> и window.onload для каждого потока
  • Использование локального хранилища flash storage
  • Возможность коррекции относительных (релятивных) путей (href и src)
  • Две модели запроса HTML страниц — «один-к-одному» и «один-ко-многим» (один запрос — ответ ко многим блокам)
  • Поддержка отработки на локальной файловой системе
  • Возможность стандартной работы в стиле Web 1.0 при отключенном JavaScript
  • Бесплатные обновления
  • Техподдержка и консультации!
« Последнее редактирование: Марта 12, 2009, 22:44:40 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #4 : Марта 12, 2009, 23:01:46 »

Для работы с AJAX запросами в библиотеке реализованы две функции dax и hax.

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

  • для запроса текстовых данных, xml, json, и подобных необходимо использовать dax (DataAjaX)
  • для запроса html необходимо использовать hax (HtmlAjaX) — этот метод и есть поддержка AHAH (Asynchronous HTML and HTTP)

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

« Последнее редактирование: Марта 12, 2009, 23:17:43 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #5 : Марта 12, 2009, 23:06:35 »

~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:
Код
javascript:
 
hax({url:'index.html', id:'my-div'})

В элемент с id='my-div' будет загружена страница 'index.html' с использованием AJAX истории.

Код
javascript:
 
hax({url:'index.html', id:'my-div', nohistory:1, onload:function(){
 alert('Hey Bingo!!')
}})


В элемент с id='my-div' будет загружена страница 'index.html' без использованием AJAX истории, после загрузки вылетит alert.

См. также:
Функция hax
« Последнее редактирование: Марта 13, 2009, 08:58:59 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #6 : Марта 12, 2009, 23:08:46 »

Пример использования dax
Код
javascript:
 
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
« Последнее редактирование: Марта 13, 2009, 09:02:49 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #7 : Апреля 06, 2009, 15:40:52 »

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

Фильтрацией можно воспользоваться двумя способами:
  • Одним из вариантов автоматического преобразования обычных ссылок в AJAX ссылки, является использование SRAX.Filter.
  • Вторым способом реализации Fly AJAX является использование ax атрибутов

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

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

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

Авто-преобразованию подвергаются также теги <form> и <area>.
« Последнее редактирование: Апреля 06, 2009, 17:34:28 от aleman » Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #8 : Апреля 06, 2009, 15:45:32 »

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

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

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

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

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

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

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

Смотрите также:
Примеры разных вариантов фильтрации
Записан
aleman
Global Moderator
*****

Авторитет: 4
Сообщений: 114


Просмотр профиля
« Ответ #9 : Апреля 06, 2009, 15:52:33 »

Вторым способом реализации Fly AJAX является использование ax атрибутов ссылок <a>. Данный подход очень понравился многим разработчикам, которые использую Fullajax в своих проектах. Рассмотрим пример на том же меню

Код
html4strict:
 
<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: (название префикса по желанию можно настроить).

Смотрите также:
Примеры разных вариантов фильтрации
« Последнее редактирование: Апреля 06, 2009, 16:08:33 от aleman » Записан
Страниц: [1]
  Печать  
 
Перейти в:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.11 | SMF © 2006-2008, Simple Machines LLC | Sitemap Valid XHTML 1.0! Valid CSS!