Добавляем Ajax PDF
Preview Добавляем Ajax
Шелли Пауэрс Санкт-Петербург «БХВ-Петербург» 2009 УДК 681.3.06 ББК 32.973.26-018.2 П21 Пауэрс Ш. П21 Добавляем Ajax: Пер. с англ. — СПб.: БХВ-Петербург, 2009. — 448 с.: ил. ISBN 978-5-9775-0226-9 На практических примерах показано, как добавлять Ajax-эффекты в уже су- ществующие веб-приложения и делать сайты более интерактивными, не переде- лывая их целиком. Кратко даны основы технологий Ajax, принципы работы с объектами XMLHttpRequest и создания запросов к веб-серверу. Описаны ос- новные библиотеки Ajax, включая Prototype, script.aculo.us, Rico и MochiKit. Рассмотрены интерактивные эффекты Ajax: использование событий и обработ- чиков событий. Описаны элементы типа accordion, страницы с вкладками, всплывающие окна и др. Приведены способы обновления данных, включая до- бавление новых данных, удаление и обновление, и все это в рамках одной стра- ницы. Объяснены причины возникновения эффектов типа "поломки" кнопки возврата или потери истории посещений и способы устранения большинства подобных неполадок. Раскрыты некоторые сложные эффекты CSS, в том числе использование объектов SVG и Canvas. Даны приемы написания mashup- приложений, затронуты вопросы масштабирования, распределения ресурсов и безопасности веб-приложений. Для веб-разработчиков УДК 681.3.06 ББК 32.973.26-018.2 Группа подготовки издания: Главный редактор Екатерина Кондукова Зам. главного редактора Евгений Рыбаков Зав. редакцией Григорий Добин Перевод с английского и редактирование Владимира Красовского Компьютерная верстка Ольги Сергиенко Корректор Зинаида Дмитриева Оформление обложки Елены Беляевой Зав. производством Николай Тверских Authorized translation of the English language edition, entitled Adding Ajax, published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472, Copyright © 2007 Shelley Powers. All rights reserved. This translation is published and sold by permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same. Авторизованный перевод английской редакции, выпущенной O'Reilly Media, Inc., © 2007 Shelley Powers. Все права защищены. Перевод опубликован и продается с разрешения O'Reilly Media, Inc., собственника всех прав на публикацию и продажу издания. Лицензия ИД № 02429 от 24.07.00. Подписано в печать 30.10.08. Формат 70 1001/16. Печать офсетная. Усл. печ. л. 36,12. Тираж 2000 экз. Заказ № "ÁÕÂ-Петербург", 194354, Санкт-Петербург, ул. Есенина, 5Б. Отпечатано с готовых диапозитивов в ГУП "Типография "Наука" 199034, Санкт-Петербург, 9 линия, 12 ISBN 978-0-596-52936-9 (англ.) © 2007 Shelley Powers ISBN 978-5-9775-0226-9 (рус.) © Перевод на русский язык "БХВ-Петербург", 2008 Îãëàâëåíèå Предисловие ........................................................................................................... 1 Аудитория ............................................................................................................................. 3 Краткое содержание книги .................................................................................................. 4 Условные обозначения ........................................................................................................ 7 Права на использование кода .............................................................................................. 8 Обратная связь ..................................................................................................................... 8 Safari® Enabled ..................................................................................................................... 9 Благодарности ...................................................................................................................... 9 Глава 1. Подготовка к добавлению Ajax ........................................................ 10 Технологии, составляющие Ajax ...................................................................................... 12 Естественное движение вперед ................................................................................. 13 Технологии: обзор книги ........................................................................................... 14 С чистого листа .................................................................................................................. 17 Валидаторы XHTML- и HTML-кода ........................................................................ 18 Валидаторы CSS-кода ................................................................................................ 20 Проверка доступности ............................................................................................... 21 Преобразование таблиц в формат CSS ............................................................................. 22 Продолжаем преобразования — элемент за элементом ................................................. 27 Индивидуальные особенности браузеров ........................................................................ 29 Управляем страницей и добавляем Ajax .................................................................. 29 Устанавливаем контроль ........................................................................................... 30 Понимание нужд клиентов ................................................................................................ 32 Узнайте своих пользователей .................................................................................... 32 Политика открытых дверей ....................................................................................... 33 План ............................................................................................................................. 35 Разработка структуры сайта .............................................................................................. 36 Познакомьтесь со своим читателем .......................................................................... 37 Безопасность и надежность ....................................................................................... 38 Сильная и слабая связь .............................................................................................. 38 Постепенное улучшение или полная реконструкция? .................................................... 39 Глава 2. Кусочки Ajax ........................................................................................ 42 Веб-приложение ................................................................................................................. 42 Структура объекта XMLHttpRequest ......................................................................... 50 VI Îãëàâëåíèå Подготовка объекта к использованию ............................................................................. 52 Подготовка и отправка запроса ........................................................................................ 54 GET, POST и REST .................................................................................................... 54 Параметры .................................................................................................................. 56 Отправка запроса........................................................................................................ 57 Обработка Ajax-ответа....................................................................................................... 61 Простой и быстрый ответ: HTML-фрагмент и innerHTML .................................... 63 Работа с более традиционным XML ......................................................................... 67 Упрощение обработки с помощью JSON ................................................................. 72 (X)HTML-фрагмент ................................................................................................... 77 Конечные точки, песочница JavaScript и виджеты ......................................................... 82 Конечные точки JSON и создание динамического сценария ................................. 83 Динамические сценарии с XML ................................................................................ 86 Меры безопасности ............................................................................................................ 87 Первый взгляд на производительность ............................................................................ 88 Последнее слово о синхронном и асинхронном .............................................................. 90 Глава 3. Терминология и инструменты Ajax ................................................ 92 Prototype .............................................................................................................................. 93 Свойство prototype языка JavaScript ......................................................................... 99 Ассоциативные массивы и риск Prototype ............................................................. 100 Внешние библиотеки: риск и преимущества ......................................................... 101 script.aculo.us .................................................................................................................... 102 Эффекты script.aculo.us ............................................................................................ 104 Rico 106 Оперативная прокрутка Ajax ................................................................................... 106 Виджеты Rico ........................................................................................................... 107 Песочница JavaScript и прокси................................................................................ 108 Dojo ................................................................................................................................... 109 Цепочка обработчиков событий ............................................................................. 111 Декларативный HTML ............................................................................................. 112 Как с помощью JavaScript обойти нестандартные атрибуты ............................... 114 Другие библиотеки ........................................................................................................... 117 jQuery ........................................................................................................................ 117 MochiKit .................................................................................................................... 118 Пользовательский интерфейс Yahoo! UI ................................................................ 119 mooTools и moo.fx .................................................................................................... 119 Библиотека Sarissa .................................................................................................... 120 WZ_jsGraphics и qForms .......................................................................................... 120 И так далее ................................................................................................................ 121 Глава 4. Интерактивные эффекты ................................................................ 122 Обработка событий в Ajax .............................................................................................. 123 Сопровождаемый обработчик событий.................................................................. 123 Îãëàâëåíèå VII Смешанный обработчик событий ........................................................................... 124 Система обработки событий Dojo Event System и целевой объект ...................... 127 Оперативная (JIT) информация ...................................................................................... 132 Форма для справки ................................................................................................... 133 Всплывающая подсказка ......................................................................................... 142 Предварительный просмотр ............................................................................................ 147 Оперативный просмотр ........................................................................................... 147 Ajax-просмотр .......................................................................................................... 150 Выделение цветом выполненных и невыполненных операций ................................... 153 Таймеры и анимация ................................................................................................ 153 Ajax-таймеры ............................................................................................................ 155 Подсветка .................................................................................................................. 157 Глава 5. Пространство. Последняя граница ................................................ 164 Горизонтальный интервал. Accordion ............................................................................ 165 Создание эффекта..................................................................................................... 166 Переходный accordion .............................................................................................. 172 Определение ширины и высоты элемента ......................................................... 172 Окончательная отделка перехода ....................................................................... 174 Использование готового эффекта accordion .......................................................... 176 Упаковка кода эффекта ............................................................................................ 181 Смешивание эффекта accordion и Ajax-запросов .................................................. 188 Страницы с вкладками ..................................................................................................... 196 Взгляд на содержимое, разбитое на вкладки ......................................................... 196 Возвращаясь к упаковке: создание универсальных вкладок ................................ 204 Использование YUI TabView .................................................................................. 205 Вкладки и доступность ............................................................................................ 209 Слои ................................................................................................................................... 209 Глава 6. Динамические данные ...................................................................... 217 Редактирование по месту ................................................................................................ 218 Добавление изменяемого поля ................................................................................ 218 Сторона клиента ....................................................................................................... 220 Сторона сервера ....................................................................................................... 229 Редактирование по месту: производительность, безопасность и доступность ........... 232 Предотвращение SQL-инъекций ............................................................................. 232 Производительность и доступность ....................................................................... 233 Улучшения ................................................................................................................ 234 Подсвечивание изменений .............................................................................................. 236 Сигнализация удаления ........................................................................................... 236 Запрос и подсвечивание обновлений ...................................................................... 242 Повторный взгляд на доступность внутристраничных обновлений ............................ 250 Повторный взгляд на внутристраничное удаление ............................................... 251 Повторный взгляд на внутристраничные добавления........................................... 252 VIII Îãëàâëåíèå Оперативная проверка достоверности ........................................................................... 253 Производительность и двухфазное подтверждение ...................................................... 257 Ajax, который ни с кем не конфликтует ................................................................. 258 Ajax, кэширование, транзакции базы данных ........................................................ 259 Эффекты для данных внешних библиотек ..................................................................... 261 Разработка и обслуживание форм........................................................................... 261 Сортировка drag-and-drop библиотеки script.aculo.us ........................................... 261 Проверка достоверности Adobe Spry...................................................................... 263 Другие библиотеки, обрабатывающие данные ...................................................... 264 Глава 7. История, навигация, место и одностраничные приложения ... 266 Многостраничный контент бросает вызов..................................................................... 267 Создание каркаса слайд-шоу ................................................................................... 269 Создание слайд-шоу фотографий ........................................................................... 277 Разбивка текста ......................................................................................................... 282 Пролистывание данных ........................................................................................... 286 Запомним место ............................................................................................................... 292 Запоминание места и фрагменты страницы ........................................................... 292 Запоминание места своевременно .......................................................................... 296 Разница между умным и сообразительным ........................................................... 300 Старое и новое, плечом к плечу ...................................................................................... 301 Новый взгляд на страницу ............................................................................................... 312 Post-Mortem ...................................................................................................................... 316 Глава 8. Добавление сложных визуальных эффектов ............................... 317 Сложные трюки CSS ........................................................................................................ 318 Закругленные углы ................................................................................................... 319 Слайдеры и полосы прокрутки ............................................................................... 320 Веб-меню .................................................................................................................. 327 Перемещаемый контейнер ...................................................................................... 328 Масштабируемая векторная графика SVG .................................................................... 332 Включение SVG ....................................................................................................... 332 Добавляем script ....................................................................................................... 335 Встроенные SVG-элементы..................................................................................... 337 Быстрый взгляд на SVG................................................................................................... 338 Основные фигуры и атрибуты................................................................................. 338 Градиенты, фильтры, эффекты и defs ..................................................................... 341 Смешиваем SVG и Ajax ................................................................................................... 342 HTML5 Canvas .......................................................................................................... 347 Будущее графики .............................................................................................................. 351 Глава 9. Сайт-мэшап ........................................................................................ 353 Карты Google .................................................................................................................... 354 Карты Google: быстро и просто .............................................................................. 354 Из пункта А в пункт Б .............................................................................................. 357 Îãëàâëåíèå IX Второй сервис — Flickr ................................................................................................... 362 Создаем мэшап ......................................................................................................... 363 Создание объектов фотографий и повторное сравнение локальных функций с Prototype ................................................................................................................. 369 Переделываем Flickr/Google в страницу с вкладками ........................................... 373 Добавляем Technorati к нашему мэшапу ........................................................................ 378 Реконструирование мэшапа ............................................................................................ 388 Доступные вкладки .................................................................................................. 389 Карты Google и IE, или Я отпускаю тебя ............................................................... 394 Абстрагирование веб-сервиса ................................................................................. 395 Реконструированные клиенты ........................................................................................ 400 Приложение без сценариев ...................................................................................... 401 Новый Ajax-клиент .................................................................................................. 404 Подытоживая мэшап ........................................................................................................ 414 Глава 10. Масштабирование, инфраструктура и основы основ .............. 415 Каркасы: сильная связь vs слабая связь ......................................................................... 416 Веб-сервис: ресурсы и безопасность .............................................................................. 418 Ajax-библиотеки: свои или чужие .................................................................................. 419 Основы Ajax-проектирования ......................................................................................... 421 Упаковка функциональности в модули .................................................................. 421 Сопровождение и тестирование .............................................................................. 422 Утечка памяти, локальное хранение и надежность ............................................... 423 Приведение каждого эффекта к простейшему виду .............................................. 424 Важные области сайта ............................................................................................. 425 Не переборщите с мэшапами .................................................................................. 425 Множество устройств .............................................................................................. 426 Поменьше "крутых" эффектов ................................................................................ 426 "Круто" не всегда плохо .......................................................................................... 427 Каркасы дня ...................................................................................................................... 428 ASP.NET и AJAX ..................................................................................................... 428 Java и GWT ............................................................................................................... 430 PHP-каркасы ............................................................................................................. 431 Python, GWT и Django ............................................................................................. 432 Эй! Это ж Perl! .......................................................................................................... 432 Ruby on Rails, Ajax и сильная связь ........................................................................ 433 Идите и добавляйте Ajax ................................................................................................. 433 Предметный указатель .................................................................................... 434
The list of books you might like
