Ajax на примерах

Ajax на примерах
Автор: Андрей Овчаренко
Год: 2009
ISBN: 978-5-9775-0299-3
Страниц: 431
Язык: Русский
Формат: PDF
Размер: 10 Мб

Download

На практических примерах рассмотрены эффективные приемы разработки динамических Web-приложений, построенных по технологии Ajax. Каждая глава посвящена разработке законченного компонента пользовательского интерфейса Web-приложения. Даны необходимые для быстрого старта сведения по HTML и CSS, XML и DOM Level 1, PHP и MySQL, а также примеры совместного их применения. Большое внимание уделено программированию на языке javascript и асинхронному обмену данными между клиентом и сервером при помощи объекта XMLHttpRequest в формате XML и JSON. Подробно описан процесс разработки компонентов пользовательского интерфейса: “Аккордеон”, панель с закладками, слайд-шоу, выпадающее меню, плавающие окна и др. Рассмотрены вопросы доступа к базам данных MySQL, управления учетными записями пользователей, защиты данных, аутентификации и авторизации, кроссбраузерности разрабатываемых приложений и др.

+

Создание компонента “Аккордеон”

В 80-х годах ХХ века было принято начинать обучение программированию с написания программы “Hello, world”, которая печатала на черном экране монохромного дисплея два слова: “Hello World!” В 90-е годы программирование перешло на объектно-ориентированные рельсы, и программисты начали мыслить объектами. Поэтому первая программа начинающего программиста создавала объект Dog и вызывала единственный метод этого объекта: Dog.bark(). Осторожные программисты не забывали реализовать более полезный метод Dog.foo().

Есть свои традиции и у Ajax-программистов. Первый компонент, который создают Ajax-программисты, называется “Аккордеон”. Такое музыкальное имя компонент “Аккордеон” получил благодаря своему внешнему сходству с этим замечательным инструментом. Когда компонент “Аккордеон” находится в свернутом состоянии, на экране отображаются только заголовки разделов. Если пользователь щелкнет по заголовку кнопкой мыши, разворачивается полный текст раздела — и мехи “Аккордеона” как бы растягиваются. Если пользователь щелкнет кнопкой мыши по другому заголовку — текущий раздел сворачивается и разворачивается новый раздел, соответствующий выбранному заголовку. “Аккордеон” играет!

Сложно сказать, почему именно этот компонент так полюбился Ajax-программистам. Нам же разработка компонента “Аккордеон” позволит сконцентрироваться на очень важных моментах в технике Ajax-программирования. В частности, на работе с HTML-элементами DIV и SPAN, каскадными таблицами стилей CSS и объектной моделью документа DOM. Кроме того, совсем неплохо на первом же уроке создать полнофункциональный компонент, который можно применить на практике.

Следующие два раздела посвящены использованию CSS в HTML-документах, после чего мы сможем приступить к разработке компонента “Аккордеон” во всеоружии.

Код готового компонента “Аккордеон” и некоторых примеров, рассматриваемых в данной главе, вы можете найти в папке \bhvajax\accordion на прилагаемом к книге компакт-диске.

CSS — каскадные таблицы стилей

Каскадные таблицы стилей CSS — ключевая технология при разработке пользовательских интерфейсов Ajax-приложений. Именно на технологии CSS построены динамические эффекты DHTML и Ajax. Меню появляются и скрываются, окна (не окна Web-браузера, а рисованные окна, реализованные при помощи HTML-элемента DIV) открываются, перетаскиваются и бросаются (Drag-and-Drop), распахиваются и сворачиваются, списки раскрываются и закрываются — все это основано на использовании каскадных таблиц
стилей CSS.

В данном разделе будут рассмотрены основы CSS, достаточные для начала работы с технологией Ajax. Кроме того, предлагаемый раздел будет служить в качестве краткого справочника для работы с CSS на протяжении всей книги. Поэтому некоторый материал будет дан подробнее, чем это следовало бы сделать при первом знакомстве. К счастью, технология CSS компактна, поэтому даже если вы никогда с ней не работали — очень скоро будете хорошо в ней ориентироваться.

Суть технологии CSS заключается в том, что стиль отображения HTML-элемента в окне Web-браузера определяется значением свойств атрибута style, который может быть задан для каждого HTML-элемента или для множества элементов, принадлежащих к одному стилевому классу. Атрибуту styleHTML-элемента можно задавать следующие свойства: цвет текста style.color, цвет или рисунок фона style.background, шрифт style.font, внешний вид рамки style.border, отступы текста от рамки внутри элемента
style.padding и отступы от соседних элементов style.margin, размеры элемента (style.width, style.height), координаты (style.top, style.left), способ отсчета координат (style.position: static, relative или absolute), способ отображения текста, выходящего за рамки элемента (style.ovreflow: visible, scroll, hidden или auto), способ врезки элемента в текст документа (style.display: inline, block, none и др.), видимость элемента (style.visibility: inherit, visible или hidden) и некоторые другие.

Определять стиль для каждого элемента HTML-документа заданием всех свойств атрибута style было бы слишком утомительно. Поэтому в технологии CSS введены стилевые правила. Стилевое правило может определять свойства стиля сразу для всех HTML-элементов одного типа, имеющих одинаковое имя тега. Например, для всех элементов H1(заголовков первого уровня) или для всех элементов P (абзац). Но чаще стилевые правила связывают не с именем тега элемента, а с именем стилевого класса. Имя стилевого класса задается в атрибуте HTML-элемента class. Например, для всех элементов, у которых атрибут class равен mystyleclass.

Можно задать и более узкое правило: одновременно по имени тега элемента и по имени стилевого класса. Например, только для элементов DIV с атрибутом class равным mystyleclass. Наконец, можно задать самое узкое правило, которое будет распространяться на один-единственный HTML-элемент с конкретным идентификатором, который задается в атрибуте id HTML-элемента. Например, для элемента с атрибутом id равным myelement.

Наиболее рационально определять стилевые правила для HTML-документа в отдельном файле с расширением css (cascade stylesheet). Формат определения стилевого класса в css-файле следующий: