Лекция 10. Создание динамического наполнения страницы. JavaScript-библиотеки и технология Comet

JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком
Формат считается независимым от языка и может использоваться практически с любым языком программирования
Практическая польза использования JSON открывается при использовании технологии AJAX

2

На языке XML:

Иван
Иванов

3

ExtJS – библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако, преобразовавшаяся затем в отдельный фреймворк.
Использует адаптеры для доступа к библиотекам YUI, jQuery или Prototype
Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и т.д.

4

Пространство имен Ext.namespace
Переопределение метода Ext.override
Наследование Ext.extend
Ext.apply – копирование каждого члена объекта config в объект obj
Ext.applyIf – копирование каждого члена объекта config в объект obj, но только в том случае, когда этот член еще не существует в объекте назначения

5

Самый нижний слой – низкоуровневые функции по работе с DOM-деревом, событиями, стилями и другие функции
Core – основные базовые модули:
Ядро
Модуль для работы визуальных компонент
Утилиты
Поддержка кросс-браузерного Drag&Drop
Компонент State Manager
Работа с данными:
Основной компонент Store
Reader
Proxy
Объект (или набор объектов) Record

6

Layout
Динамическая подсказка или Tooltip
Виджеты
Таб-панель
Tree
Форма
Таблица или Grid

7

Prototype – JavaScript-фреймворк, упрощающий работу с Ajax и некоторыми другими функциями
Обычно используется вместе с Ruby on Rails, script.aculo.us и Rico.
Поддерживает ООП
Поддерживается следующими браузерами: Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+

8

Функция $() – обращение к DOM элементу HTML-страницы
Функция $$() – для разделения CSS от контента
Функция $F() – возвращение значения определенного элемента HTML формы
Функция $A() – преобразование аргумента в объект Array
Функция $H() – преобразование объектов в перечислимые Хэш-объекты
Объект Ajax – методы инициализации и работы с функцией XMLHttpRequest
Класс Element – методы класса предназначены для работы с элементами HTML

9

jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
Возможности:
переход по дереву DOM, включая поддержку XPath как плагина
события
визуальные эффекты
AJAX-дополнения
JavaScript-плагины

10

$(html) – позволяет создать html-элементы «на лету» из «чистого» HTML
$(elems) – позволяет «прицепить» всю функциональность jQuery к уже существующим элементам страницы
$(expr[, context]) – первый параметр указывает выражение, которое позволит jQuery найти элемент на странице, второй параметр указывает, где искать этот элемент

11

12

animate(params, speed, easing, callback);
params – свойства, которые участвуют в анимации в виде пар {ключ: значение}
speed – скорость в миллисекундах
easing – замедление анимации
callback – функция, которая будет вызвана после завершения анимации
Эффекты jQuery:
show([speed[, callback]]) – показать элемент
fadeOut(speed[, callback]) – скрыть элемент путем изменения его прозрачности
slideDown(speed, callback) – показать элемент, спустив его сверху

13

Технология Comet – модель работы Веб-приложения, при которой постоянное HTTP-соединение позволяет Веб-серверу отправлять (push) данные браузеру без дополнительного запроса со стороны браузера
HTTP server push (HTTP streaming) – механизм отправки данных с Веб-сервера к Веб-браузеру
Веб-сервер не закрывает соединение после отправки ответа клиенту
Данные составляются в очередь до следующего запроса клиента

14

15

Short polling



Long polling

16