- •Введение
- •Несколько слов о книге
- •Глава 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
- •Формирование объектов
Рис. 13.11. Работа показанного в окне приложения чтения RSS-лент приостановлена, поскольку центральная кнопка имеет название RESUME
13.6.Как избежать ограничений проекта
Спомощью основанного на Ajax приложения мы можем читать RSS-ленты из HTML-файла, записанного на рабочем столе, не требуя серверного кода. Данное приложение можно использовать для захвата RSS-лент без посещения соответствующих Web-сайтов. Мы можем предложить посетителям нашего Web-сайта загрузить данную HTML-страницу, настроив ее на чтение RSSлент этого сайта. Поскольку представленный сценарий можно запустить и на самом Web-сайте, его можно использовать и для других целей. Например, это может быть переключение рекламы в баннере, баннер новостей компании или все, что мы можем придумать. Однако представленный сценарий обладает определенными ограничениями; кроме того, при его запуске на рабочем столе
спомощью браузера Mozilla могут возникнуть определенные проблемы.
13.6.1. Обход системы безопасности браузеров Mozilla
В отличие от Microsoft Internet Explorer, браузеры Firefox и Mozilla не позволяют запускать созданное приложение с рабочего стола из-за встроенных ограничений безопасности. Данные ограничения не дают Ajax общаться с другими Web-сайтами, поскольку направлены на то, чтобы код не мог отправлять информацию без нашего ведома.
Чтобы убедиться, что проблема работы сценария связана именно с этим, необходимо исследовать сообщение об ошибке. В браузере Mozilla мы должны открыть консоль JavaScript, вызываемую из меню Tools =?• Web Development =Ф- JavaScript Console (Инструменты => Web-разработка =Ф Консоль JavaScript) (рис. 13.12).
546 Часть IV Ajax в примерах
Рис. 13.12. В браузере Mozilla
выберите T o o l s |
=> Web |
Development |
=> |
J a v a S c r i p t |
C o n s o l e |
(Инструменты =^ |
|
Web-разработка =$> |
|
Консоль J a v a S c r i p t ) |
Рис. 13.13. Сообщение об ошибке "недостаточно полномочий", порожденной объектом
X M L H t t p R e q u e s t
Выбрав команду JavaScript Console (консоль JavaScript), мы открываем дополнительное окно (рис. 13-13).
На рис. 13.13 показана ошибка "permission denied" ("недостаточно полномочий"), порожденная объектом XMLHttpRequest. Исправить ее можно двумя способами. Например, можно открыть конфигурационный файл браузера Mozilla и изменить настройки разрешений, позволив объекту XMLHttpRequest выполнить то, что он хочет. Для этого в адресной строке браузера следует ввести about: conf ig и изменить необходимые настройки, однако данные действия небезопасны.
Небезопасность изменения настроек связана с тем, что наши разрешения касаются всего, что происходит на компьютере. Это означает, что любой сценарий, желающий связаться с внешним миром, сможет это сделать. Как этого можно избежать, разрешив данное общение только нашему сценарию? В качестве решения мы можем установить безопасность с помощью JavaScript. О том, как это сделать, при условии, что браузер настроен на обработку запросов к PrivilegeManager, мы рассказывали в главе 7. Напомним кратко, о чем идет речь. В листинге 13.18 показан общий код, который предоставляет
дополнительные привилегии, требуемые для чтения внешних ресурсов. |
|
•:;:. Листинг 13.18. Управление привилегиями Security Privilege Manager |
|
if(window.netscape && |
|
window.netscape.security.PrivilegeManager.enablePrivilege) |
|
netscape.security.PrivilegeManager.enablePrivilege( |
|
'UniversalBrowserRead1 ); |
— |
В приведенном коде проверяется, можем ли мы обращаться к Privilege- |
|
Manager. Если да, тогда мы получаем привилегию UniversalBrowserRead. |
|
Данный код необходимо добавить в два различных места объекта Content- |
|
Loader, отвечающего за функциональные возможности Ajax. |
|
Вначале мы должны вставить указанный код сразу после объявления |
|
loadXMLDoc, как показано в листинге 13.19. |
|
Глава 13 Создание приложений Ajax, не использующих сервер 547
Рис. 13.14. Запрос, требующий от пользователя подтвердить изменение прав доступа
Листинг 13.19. Вставка "кода т функцию loadXMLDoc
net.ContentLoader.prototype.loadXMLDoc = function( url,method,params,contentType){
if(window.netscape && window.netscape.security.PrivilegeManager.enablePrivilege) netscape.security.PrivilegeManager.enablePrivilege(
'UniversalBrowserRead1); _
Кроме того, код необходимо вставить в функцию onReadyState (ли-
стинг 13.20). |
|
Либтинг 13.20, Вставка кода в функцию onReadyState |
И М Я |
net.ContentLoader.onReadyState=function(){ |
|
if(window.netscape && |
|
window.netscape.security |
|
.PrivilegeManager.enablePrivilege) |
|
netscape.security.PrivilegeManager |
|
.enablePrivilege(' |
|
UniversalBrowserRead'); |
д |
Обе указанные функции взаимодействуют с данными из внешнего мира. Именно поэтому мы должны ввести обозначенные фрагменты в обоих местах. При выполнении сценария мы получаем сообщение-запрос, требующее подтверждения изменений настроек безопасности (рис. 13.14).
Если просто щелкнуть на кнопке Allow (Разрешить), запрос будет открываться при каждом вызове функции. Чтобы избежать этого, необходимо