На этом шаге мы начнем конструировать демонстрационное приложение.
Если отбросить всю шумиху, AJAX - это всего лишь средство загрузки данных с сервера в веб-браузер, или клиент, не вызывающее видимого обновления страницы. Эти данные могут принимать самые разные формы, и при получении их они могут обрабатываться массой разных способов. Мы убедимся в этом, решая одну и ту же простую задачу разными путями.
Мы создадим страницу, которая будет отображать словарные статьи, сгруппированные по первому символу статьи. Ниже приводится разметка HTML, определяющая область содержимого страницы:
<div id="dictionary"> </div>
Это не ошибка! Изначально страница не содержит никакой информации. Мы будем использовать различные методы поддержки технологии AJAX, входящие в состав библиотеки jQuery, чтобы заполнить этот элемент <div> словарными статьями.
Нам необходим механизм, запускающий процесс загрузки данных, поэтому мы добавим несколько ссылок, к которым будем подключать обработчики событий:
<div class="letters"> <div class="letter" id="letter-a"> <h3><a href="#">А</a></h3></div> <div class="letter" id="letter-b"> <h3><a href="#">Б</a></h3></div> <div class="letter" id="letter-c"> <h3><a href="#">В</a></h3></div> <div class="letter" id="letter-d"> <h3><a href="#">Г</a></h3></div> </div>
Примечание. Как обычно, действующая реализация должна предусматривать возможность прогрессивного улучшения, чтобы обеспечить работоспособность страницы в браузерах с отключенной поддержкой JavaScript. Здесь, чтобы упростить пример, мы не предусматриваем никаких действий для ссылок, пока с помощью jQuery к ним не будут подключены обработчики событий.
Добавив несколько правил CSS, мы получили страницу, которая выглядит, как показано на рисунке 1.
Рис.1. Начальная страница после добавления некоторых правил CSS
Полный текст этого примера можно взять здесь.Теперь можно сосредоточиться на наполнении страницы содержимым.
На следующем шаге мы рассмотрим добавление разметки HTML.
