HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Выходит, б'oльшая часть содержимого наших монолитных Web-страниц неизменна. Настолько неизменна, что мы можем копировать соответствующий HTML-код из одной Web-страницы в другую без всякой правки или пересохранять Web-страницу под другим именем, чтобы создать новую. (В главе 16, кстати, мы так и поступили.)

Второй вывод: монолитные Web-страницы, принадлежащие одному Web-сайту, отличаются друг от друга только небольшим фрагментом своего содержимого. Остальной код на всех этих Web-страницах один и тот же.

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

Второй недостаток затрагивает уже Web-дизайнеров. Если нам потребуется внести изменения в какой-либо из повторяющихся на всех Web-страницах элементов, например, добавить новый пункт в полосу навигации, то придется вносить соответствующие изменения в HTML-код всех Web-страниц данного Web-сайта. Работа долгая, тяжелая, вдобавок, выполняя ее, нетрудно сделать ошибку…

Выход их этого положения — задействовать подгружаемое содержимое. О нем уже упоминалось в главе 1. Вкратце: отдельные части содержимого Web-страниц средствами Web-обозревателя загружаются из других файлов и выводятся в указанное место Web-страницы, а именно в указанный блочный контейнер.

Исходя из этого, набросаем план действий.

— Создаем Web-страницу, содержащую только элементы, остающиеся неизменными на всех Web-страницах нашего Web-сайта, и пустой контейнер, в который будет выводиться основное содержимое. Назовем эту Web-страницу базовой. Базовую Web-страницу сделаем главной Web-страницей Web-сайта.

— Сохраняем основное содержимое всех Web-страниц в отдельных файлах, которые будут хранить только HTML-код, создающий основное содержимое.

— При открытии базовой Web-страницы (мы использовали ее в качестве главной) загружаем основное содержимое, которое должно присутствовать в ней изначально, из файла, где оно хранится, и выводим его в предназначенный для этого контейнер.

— При щелчке на гиперссылке загружаем основное содержимое целевой Web-страницы из соответствующего файла и также выводим его в контейнер.

Достоинств у такого подхода два. Во-первых, файлы с основным содержимым Web-страниц получатся существенно меньше за счет того, что они хранят только основное содержимое и не включают HTML-код, создающий элементы, повторяющиеся от Web-страницы к Web-странице. Во-вторых, если нужно внести исправления в какую-либо Web-страницу, править понадобится всего один файл: либо файл с базовой Web-страницей, либо файл с основным содержимым.

Осталось только сказать, что Web-страницы, "собирающие" свое содержимое из фрагментов, хранящихся в отдельных файлах, неофициально называются блочными.

Но как нам загрузить фрагмент содержимого Web-страницы, хранящийся в отдельном файле? О, современные Web-обозреватели предоставляют все средства для этого. А библиотека Ext Core позволяет задействовать данные средства, написав минимум JavaScript-кода.

Подгрузка содержимого Web-страниц

Для подгрузки фрагмента содержимого Web-страницы из стороннего файла и вывода его в указанный элемент Web-страницы библиотека Ext Core предлагает метод load объекта Element:

<экземпляр объекта Element>.load(<интернет-адрес>|<конфигуратор>)

Единственный параметр метода load задает либо интернет-адрес файла, в котором хранится предназначенный для загрузки фрагмент содержимого Web-страницы, либо конфигуратор, задающий параметры для загрузки данного файла.

Вот свойства этого конфигуратора и соответствующие им параметры:

— url — интернет-адрес загружаемого файла в виде строки. Это единственный обязательный параметр.

— success — функция, которая будет вызвана, если загрузка файла завершится успешно.

— failure — функция, которая будет вызвана, если при загрузке файла возникнет ошибка.

— callback — функция, которая будет вызвана после окончания загрузки файла, независимо от того, успешно загрузится файл или нет.

— timeout — промежуток времени (тайм-аут), в течение которого Web-обозреватель будет ожидать окончания загрузки файла. Если файл за этот промежуток времени не загрузится, библиотека Ext Core будет считать, что возникла ошибка загрузки. Тайм-аут задается в виде числа в миллисекундах; значение по умолчанию — 30 000 мс (30 с).

Функции, указанные в параметрах success и failure, не принимают параметров. Функция, указанная в параметре callback, должна принимать два параметра: конфигуратор, переданный методу load в качестве параметра, и логическое значение, равное true в случае удачной загрузки файла и false при возникновении ошибки.

Метод load полностью заменяет все содержимое элемента Web-страницы, у которого он был вызван. Добавить загруженное содержимое к уже имеющемуся с его помощью мы не сможем.

А теперь важный момент! Метод load при вызове отправляет Web-серверу запрос на получение указанного файла и сразу же завершает свою работу (начинает выполняться код, следующий за вызовом этого метода). Он не ждет, когда файл будет загружен и выведен на экран. Программисты называют подобные методы асинхронными.

Но что делать, если нам понадобится выполнять какие-либо манипуляции с содержимым загруженного файла? Посмотрим на список свойств конфигуратора, передаваемый методу load в качестве параметра. Там присутствует свойство success, которому присваивается функция, вызываемая после успешной загрузки файла. Мы можем поместить код, манипулирующий загруженным содержимым, в тело этой функции. (Еще можно использовать функцию, присваиваемую свойству callback конфигуратора, только в этом случае придется проверять, успешно ли завершилась загрузка.)

ВНИМАНИЕ!

Средства Web-обозревателя для подгрузки содержимого из стороннего файла, которые задействует библиотека Ext Core, работают только в том случае, если все эти файлы, а также файл базовой Web-страницы загружаются с Web-сервера. При загрузке файлов без участия Web-сервера, прямо с файловой системы локального компьютера, они не работают — это ограничения самого Web-обозревателя.

Еще в главе 1 мы установили и опробовали в работе Web-сервер Microsoft Internet Information Services. Долгое время мы им не пользовались, но теперь настал момент, когда его "услуги" нам потребуются. Так что проверим его еще раз — потом будет не до того.