- •Введение
- •Несколько слов о книге
- •Глава 1. Каким должен бытъ Web-интерфейс
- •Действия пользователя при работе с приложением
- •Накладные расходы при работе в сети
- •Асинхронное взаимодействие
- •Независимый и переходный образы использования
- •Четыре основных принципа Ajax
- •Браузер имеет дело с приложением, а не с содержимым
- •Сервер доставляет данные, а не содержимое
- •Реальное кодирование требует порядка
- •Применение богатых клиентов Ajax
- •Системы, созданные с использованием Ajax
- •Google Maps
- •Альтернативные технологии
- •Macromedia Flash
- •Java Web Start
- •Резюме
- •Ресурсы
- •Основные элементы Ajax
- •JavaScript изучался не зря
- •Определение внешнего вида с помощью CSS
- •Селекторы CSS
- •Свойства стилей
- •Простой пример использования CSS
- •Обработка DOM с помощью JavaScript
- •Поиск узла DOM
- •Создание узла DOM
- •Добавление стилей к документу
- •Свойство innerHTML
- •Асинхронная загрузка с использованием XML
- •Элементы IFrame
- •Объекты XmlDocument и XMLHttpRequest
- •Использование фуниции обратного вызова для контроля запроса
- •Жизненный цикл процедуры поддержки запроса
- •Отличия Ajax от классических технологий
- •Резюме
- •Ресурсы
- •Порядок из хаоса
- •Образы разработки
- •Реструктуризация и Ajax
- •Во всем надо знать меру
- •Реструктуризация в действии
- •Варианты применения реструктуризации
- •Несоответствие браузеров: образы разработки Fagade и Adapter
- •Управление обработчиками событий: образ разработки Observer
- •Повторное использование обработчиков событий: образ разработки Command
- •Обеспечение единственной ссылки на ресурс: образ разработки Singleton
- •"Модель-представление-контроллер "
- •Серверная программа Ajax, созданная без применения образов разработки
- •Реструктуризация модели
- •Разделение содержимого и представления
- •Библиотеки независимых производителей
- •Библиотеки, обеспечивающие работу с различными браузерами
- •Компоненты и наборы компонентов
- •Элементы, располагаемые на стороне сервера
- •Резюме
- •Ресурсы
- •Применение архитектуры MVC к программам различных уровней
- •Применение архитектуры MVC к объектам, присутствующим в среде браузера
- •Представление в составе Ajax-приложения
- •Отделение логики от представления
- •Отделение представления от логики
- •Контроллер в составе Ajax-приложения
- •Классические JavaScript-обработчики
- •Модель обработки событий W3C
- •Реализация гибкой модели событий в JavaScript
- •Модель в составе Ajax-приложения
- •Использование JavaScript для моделирования предметной области
- •Взаимодействие с сервером
- •Генерация представления на основе модели
- •Отражение объектов JavaScript
- •Обработка массивов и объектов
- •Включение контроллера
- •Резюме
- •Ресурсы
- •Программы, выполняемые на сервере
- •Создание программ на стороне сервера
- •N-уровневые архитектуры
- •Управление моделью предметной области на стороне клиента и на стороне сервера
- •Принципы создания программ на сервере
- •Серверные программы, не соответствующие основным принципам разработки
- •Использование архитектуры Model!
- •Использование архитектуры на базе компонентов
- •Архитектуры, ориентированные на использование Web-служб
- •Частные решения: обмен данными
- •Взаимодействие, затрагивающее только клиентскую программу
- •Пример отображения информации о планетах
- •Взаимодействие, ориентированное на содержимое
- •Взаимодействие, ориентированное на сценарий
- •Передача данных серверу
- •Использование HTML-форм
- •Использование объекта XMLHttpRequest
- •Управление обновлением модели
- •Резюме
- •Ресурсы
- •Создание качественного приложения
- •Отклик программы
- •Надежность
- •Согласованность
- •Простота
- •Как получить результат
- •Предоставление сведений пользователю
- •Поддержка ответов на собственные запросы
- •Обработка обновлений, выполненных другими пользователями
- •Создание системы оповещения
- •Основные принципы оповещения
- •Реализация базовых средств оповещения
- •Отображение пиктограмм в строке состояния
- •Отображение подробных сообщений
- •Формирование готовой системы
- •Предоставление информации в запросах
- •Информация о новизне данных
- •Простой способ выделения данных
- •Выделение данных с использованием библиотеки Scriptaculous
- •Резюме
- •Ресурсы
- •JavaScript и защита браузера
- •Политика "сервера-источника"
- •Особенности выполнения сценариев в Ajax-приложении
- •Проблемы с поддоменами
- •Взаимодействие с удаленным сервером
- •Взаимодействие с Web-службами
- •Защита конфиденциальной информации
- •Вмешательство в процесс передачи данных
- •Организация защищенного НТТР-взаимодействия
- •Передача шифрованных данных в ходе обычного HTTP-взаимодействия
- •Управление доступом к потокам данных Ajax
- •Создание защищенных программ на уровне сервера
- •Ограничение доступа к данным из Web
- •Резюме
- •Ресурсы
- •Что такое производительность
- •Скорость выполнения JavaScript-программ
- •Определение времени выполнения приложения
- •Использование профилировщика Venkman
- •Оптимизация скорости выполнения Ajax-приложения
- •Использование памяти JavaScript-кодом
- •Борьба с утечкой памяти
- •Особенности управления памятью в приложениях Ajax
- •Разработка с учетом производительности
- •Простой пример управления памятью
- •Как уменьшить объем используемой памяти в 150 раз
- •Резюме
- •Ресурсы
- •Сценарий двойной комбинации
- •Недостатки клиентского решения
- •Недостатки клиентского решения
- •Архитектура клиента
- •Разработка взаимодействия клиент/сервер
- •Реализация сервера: VB.NET
- •Написание кода сервера
- •Представление результатов
- •Применение каскадных таблиц стилей
- •Дополнительные вопросы
- •Запросы при выборе нескольких элементов
- •Переход от двойного связного выбора к тройному
- •Реструктуризация
- •Новый и улучшенный объект netContentLoader
- •Создание компонента двойного списка
- •Резюме
- •Глава 10. Опережающий ввод
- •Изучаем опережающий ввод
- •Типичные элементы приложений опережающего ввода
- •Google Suggest
- •Ajax как средство опережающего ввода
- •Структура серверной части сценария: С#
- •Сервер и база данных
- •Тестирование серверного кода
- •Структура клиентской части сценария
- •HTML
- •JavaScript
- •Обращение к серверу
- •Дополнительные возможности
- •Реструктуризация
- •День 1: план разработки компонента TextSuggest
- •День 3: включаем Ajax
- •День 4: обработка событий
- •День 5: пользовательский интерфейс всплывающего окна с предлагаемыми вариантами
- •Итоги
- •Резюме
- •Эволюционирующий портал
- •Классический портал
- •Портал с богатым пользовательским интерфейсом
- •Создание портала с использованием Java
- •Таблица пользователя
- •Серверная часть кода регистрации: Java
- •Структура регистрации (клиентская часть)
- •Реализация окон DHTML
- •База данных окон портала
- •Серверный код окна портала
- •Добавление внешней библиотеки JavaScript
- •Возможность автоматического сохранения
- •Адаптация библиотеки
- •Автоматическая запись информации в базе данных
- •Реструктуризация
- •Определение конструктора
- •Адаптация библиотеки AjaxWindows.js
- •Задание команд портала
- •Выводы
- •Резюме
- •Понимание технологий поиска
- •Классический поиск
- •"Живой" поиск с использованием Ajax и XSLT
- •Возврат результатов клиенту
- •Код клиентской части сценария
- •Настройка клиента
- •Инициализация процесса
- •Код серверной части приложения: РНР
- •Создание XML-документа
- •Создание документа XSLT
- •Объединение документов XSL и XML
- •Совместимость с браузером Microsoft Internet Explorer
- •Совместимость с браузерами Mozilla
- •Последние штрихи
- •Применение каскадных таблиц стилей
- •Улучшение поиска
- •Поддержка браузерами Opera и Safari
- •Использовать ли XSLT
- •Решение проблемы закладок
- •Реструктуризация
- •Объект XSLTHelper
- •Компонент "живого" поиска
- •Выводы
- •Резюме
- •Считывание информации из внешнего мира
- •Поиск XML-лент
- •Изучение структуры RSS
- •Богатый пользовательский интерфейс
- •Чтение лент
- •HTML-структура без таблиц
- •Гибкое CSS-форматироеание
- •Глобальный уровень
- •Предварительная загрузка средствами Ajax
- •Богатый эффект перехода
- •Правила прозрачности, учитывающие индивидуальность браузеров
- •Реализация затухающего перехода
- •Интеграция таймеров JavaScript
- •Дополнительные возможности
- •Введение дополнительных лент
- •Интеграция функций пропуска и паузы
- •Как избежать ограничений проекта
- •Обход системы безопасности браузеров Mozilla
- •Изменение масштаба приложения
- •Реструктуризация
- •Модель приложения
- •Представление приложения
- •Контроллер приложения
- •Выводы
- •Резюме
- •Отладчики
- •Для чего нужен отладчик
- •Средство Safari DOM Inspector для Mac OS X
- •Ресурсы
- •JavaScript — это не Java
- •Формирование объектов
эть |
часть IV Ajax в примерах |
В четырех предыдущих главах мы разработали широкий спектр аккуратных приложений Ajax и привели соответствующие коды клиентов и серверов. В данной главе мы не будем представлять код серверной части приложения, поскольку его просто не будет. Возможно, для многих это будет сюрпризом, но приложения Ajax можно запускать для обработки потока данных, формат которых совпадает с форматом ответа Web-сервера. В частности, для Webстраницы мы можем создать богатый пользовательский интерфейс, действующий как клиентское приложение.
Многие Web-сайты предлагают ленты сообщений XML в форматах RSS (Really Simple Syndication — очень простой синдикат), RDF (Resource Descriptor Framework — каркас дескриптора ресурсов) и Atom — трех наиболее популярных лентах сообщений. Информация, содержащаяся в подобных наборах лент, может представлять собой ежедневные новости, комиксы, блоги, шутки, прогноз погоды и т.д. Благодаря Ajax мы можем получать объединенную информацию, не посещая все эти сайты и не покупая клиентское приложение, считывающее XML-ленты на наш компьютер.
В данной главе мы создадим собственное клиентское приложение чтения XML-лент, получающее ленты с различных Web-сайтов. Его можно будет запускать в браузере на любом компьютере, подключенном к Интернету.
13.1. Считывание информации из внешнего мира
Объединенная лента XML состоит из статей, которые можно свободно читать
иотображать на своих Web-сайтах. Хорошим примером объединенной ленты XML является блог. Следует отметить, что данные XML-ленты отличаются от старых добрых статей на Web-сайте, поскольку их можно совместно использовать и отображать во многих форматах. Это похоже на поиск газеты или журнала, точно соответствующих размерам стола, за которым вы завтракаете. Благодаря этому вы можете есть и читать, ничего не передвигая
ине рискуя разлить утренний кофе. Объединенные ленты можно отформатировать в любом стиле, удовлетворяющем вашим потребностям, что позволяет получать только ту информацию, которая вам действительно требуется.
Содержимое объединенных лент XML можно просматривать несколькими способами. Например, если данную задачу нужно решить для одного блога, мы можем зайти на Web-сайт, где расположена XML-лента. Чтобы одновременно просматривать несколько лент без обращения к нескольким сайтам, можно, например, воспользоваться узлами, подобными JavaCrawl.com. Кроме того, RSS-ленту можно просматривать в необработанном виде, непосредственно открывая исходный XML-файл в Web-браузере, или использовать специальное программное обеспечение для структурирования и форматирования лент, которые вам требуются.
Помимо перечисленных вариантов, для просмотра лент можно использовать Ajax. Без Ajax нам потребовалось бы загрузить клиентское приложение или зайти на Web-сайт, чтобы получить необходимую информацию, но благодаря Ajax нам этого делать не придется. Вместо этого мы разработаем RSS-клиент на основе JavaScript, который можно будет запустить прямо на
Рис, 13.1. Блог Эрика Паскарелло, предлагающий RSS-ленту
рабочем столе, используя только браузер. В данной главе мы создадим приложение, получающее несколько лент RSS из нескольких источников и позволяющее упорядоченно просматривать поступающую информацию. Кроме того, для улучшения привлекательности пользовательского интерфейса мы интегрируем в приложение эффекты переходов. Однако, прежде чем мы приступим к разработке приложения Ajax, необходимо разобраться в формате XML-ленты и понять, где эти ленты можно взять.
13.1.1. Поиск XML-лент
Одним из наиболее популярных мест для поиска XML-лент являются блоги. Нынешняя популярность блогов объясняется множеством причин. Они могут содержать различную информацию: личные записи, мысли, новости, шутки или обсуждение технологий. Рассмотрим один из примеров — блог Эрика Паскарелло, показанный на рис. 13.1.
Данный блог является доступным, т.е. зайти на него может кто угодно. Хотя многие пользователи просто читают информацию этого блога, находящегося на сайте JavaRanch, блог доступен и в виде XML-ленты. Для чтения этой ленты можно обратиться к ее "родной" XML-форме либо зайти на другой Web-сайт (например, JavaLobby), который получает объединенную ленту и отображает ее в собственном формате.
На рис. 13.1 в правом верхнем углу экрана видны ссылки на RSS, RDF и Atom. Как отмечалось ранее, данные форматы XML-лент являются наиболее распространенными.
Все указанные ленты имеют различные спецификации XML. Это означает, что, изучив соответствующие XML-файлы, мы обнаружим различные схе-
518 Часть IV. Ajax в примерах
Таблица 13.1. Необходимые элементы канала
Элемент |
Описание |
Пример |
d e s c r i p t i o n Фраза, описывающая канал |
Странные мысли из головы Эрика |
|
l i n k |
URL на Web-сайт HTML, с которым |
h t t p : / / r a d i o . j a v a r a n c h . c o m / |
|
установлен канал связи |
p a s c a r e l l o |
t i t l e |
Имя канала, а также название |
Блог Эрика на JavaRanch.com |
|
службы. Должно ассоциироваться |
|
|
с названием Web-сайта |
|
мы именования элементов. Вообще, каждая лента содержит спецификацию, уточняющую, какая информация должна определяться в ленте. Поскольку мы имеем дело с различными форматами, проще всего выбрать один из них и разработать для него клиент чтения лент.
Поскольку одним из наиболее популярных форматов лент является RSS (Really Simple Syndication — очень простой синдикат), далее мы будем изучать только RSS-ленты.
13.1.2. Изучение структуры RSS
Прежде чем приступить к разработке XML-клиента Ajax для чтения лент RSS, рассмотрим структуру RSS-файла. Знание структуры позволит более эффективно исследовать DOM XML и получить информацию, которую нам необходимо отобразить. Итак, документ RSS состоит из двух частей: канала и статей. Канал предоставляет информацию о том, откуда поступает лента; назначение статей понятно из названия.
Составляющие элементы канала
В определенном смысле канал можно рассматривать как заголовок RSSленты. Элементы канала сообщают пользователю, откуда поступает лента RSS, как она называется, когда обновлялась последний раз, и т.д. Как показано в табл. 13.1, спецификация RSS требует задания крайне малого числа элементов.
Данные три необходимых элемента предоставляют основную информацию о RSS-ленте. Они сообщают, откуда идет RSS-канал, как он называется и о чем он. Если нам понадобится другая информация о ленте, потребуется обратиться к дополнительным элементам.
Лента RSS может содержать любое число из указанных в табл. 13.2 дополнительных элементов канала. Разработчик ленты может не включать их в свой продукт, включить один, два или все шестнадцать.
Некоторые опции включают адреса электронной почты, которые потребуются при возникновении проблем, касающихся содержимого или структуры. Кроме того, имеется информация, объясняющая, когда обновляется лента.
Глава 13. Создание приложений Ajax, не использующих сервер 519
Таблица 13.2. Дополнительные элементы канала
Элемент |
Описание |
Пример |
|
c a t e g o ry |
Задает, к какой категории принадлежит канал |
Программирование |
|
c l o u d |
Позволяет регистрировать процессы |
|
|
|
с атрибутом cloud, чтобы они уведомлялись |
|
|
|
об обновлении канала. Таким образом, |
|
|
|
реализуется облегченный протокол |
|
|
|
публикации-подписки |
|
|
c o p y r i g h t |
Уведомление об авторских правах на |
Эрик Паскарелло |
|
|
содержимое канала |
|
|
docs |
URL, указывающий на документацию по |
h t t p : //backend. |
|
|
лентам RSS |
userland . com/rss |
|
g e n e r a t o r |
Строка, указывающая, какая программа |
Pebble |
|
|
использовалась для генерации протокола |
|
|
image |
Задает изображение, которое можно |
h t t p : / / p e b b l e . |
|
|
отображать вместе с лентой |
soundforge . n e t / |
|
|
|
|
common/images/ |
|
|
|
powered-by- |
|
|
|
pebble.gif |
language |
Язык, на котором написан канал |
En |
|
l a s t B u i l d D a t e |
Время последнего изменения содержимого |
|
|
managing e d i t o r Электронный адрес редактора, отвечающего |
pascarello@ |
||
|
за содержимое |
javaranch.com |
|
pubDate |
Дата публикации содержимого |
|
|
r a t i n g |
Рейтинг PICS данного канала. См. |
|
|
|
http://www.w3.org/PICS/ |
|
|
skipDays |
Информирует агрегаторы (программы сбора |
|
|
|
и чтения RSS-лент), в какие дни они могут не |
|
|
|
заниматься поиском обновлений |
|
|
skipHours |
Информирует агрегаторы, в какие часы они |
|
|
|
могут не заниматься поиском обновлений |
|
|
t e x t l n p u t |
Задает поле текстового ввода, которое может |
||
|
отображаться |
|
|
t t l |
Указывает время жизни (Time to Live— TTL), |
|
|
|
или число минут, в течение которых данные |
|
|
|
канала могут котироваться, не требуя |
|
|
|
обновления |
|
|
webmaster |
Адрес электронной почты администратора, |
webmaster@ |
|
|
отвечающего за технические вопросы |
javaranch.com |
|
