В книге "Добавляем Ajax" на практических примерах показано, как добавлять Ajax-эффекты в уже существующие веб-приложения и делать сайты более интерактивными, не переделывая их целиком. Кратко даны основы технологий Ajax, принципы работы с объектами XMLHttpRequest и создания запросов к веб-серверу. Описаны основные библиотеки Ajax, включая Prototype, script.aculo.us, Rico и MochiKit. Рассмотрены интерактивные эффекты Ajax: использование событий и обработчиков событий. Описаны элементы типа accordion, страницы с вкладками, всплывающие окна и др. Приведены способы обновления данных, включая добавление новых данных, удаление и обновление, и все это в рамках одной страницы. Объяснены причины возникновения эффектов типа "поломки" кнопки возврата или потери истории посещений и способы устранения большинства подобных неполадок. Раскрыты некоторые сложные эффекты CSS, в том числе использование объектов SVG и Canvas. Даны приемы написания mashup-приложений, затронуты вопросы масштабирования, распределения ресурсов и безопасности веб-приложений.




Содержание



Оглавление Предисловие 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
Подготовка объекта к использованию 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
Смешанный обработчик событий 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
Оперативная проверка достоверности 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
Второй сервис - 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
Предметный указатель