Но как нам загрузить фрагмент содержимого 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. Долгое время мы им не пользовались, но теперь настал момент, когда его "услуги" нам потребуются. Так что проверим его еще раз — потом будет не до того.
Реализация подгрузки содержимого
Теоретическая часть главы вышла очень короткой. Значит, больше времени останется на практику!
Давайте создадим новый Web-сайт, в котором и реализуем подгрузку содержимого. Его Web-страницы мы изготовим на основе соответствующих Web-страниц старого Web-сайта.
ВНИМАНИЕ!
Далее будем называть фрагменты содержимого Web-страниц, хранящиеся в отдельных файлах, также Web-страницами. Ведь это Web-страницы и есть! Если же потребуется отметить различие между "полноразмерной" Web-страницей и фрагментом, мы это особо отметим.
Прежде всего, создадим папку, которая станет корневой для нового Web-сайта. Назовем ее Site 2. Скопируем туда из корневой папки старого Web-сайта (Site 1) файлы main.css, main.js и ext-core.js. И сразу же создадим в ней папки chapters (для Web-страниц разделов), tags (для Web-страниц с описаниями тегов HTML), attrs (для Web-страниц, описывающих атрибуты стиля CSS) и samples (для Web-страниц с примерами).
Откроем в Блокноте Web-страницу index.htm старого Web-сайта и пересохраним под тем же именем в папке Site 2. Удалим из ее контейнера cmain все содержимое и сохраним.
Снова откроем Web-страницу index.htm старого Web-сайта и пересохраним ее в папке chapters, вложенной в папку Site 2, под именем html.htm. Удалим из нее все, кроме содержимого контейнера cmain, и сохраним снова.
Аналогично создадим остальные Web-страницы нового Web-сайта. И не забудем скопировать файлы графического изображения, аудио- и видеоклипа из папки старого Web-сайта в соответствующую папку нового.
Откроем Web-страницу index.htm уже нового Web-сайта и исправим интернет- адреса в гиперссылках, указывающих на другие Web-страницы. При этом будем иметь в виду, что интернет-адреса всех файлов с внедренными объектами (изображениями, аудио- и видеороликами) следует указывать относительно Web-страницы index.htm — ведь именно она фактически будет их загружать.
Web-страницы готовы. Настала пора создавать соответствующее поведение. Откроем Web-страницу index.htm нового Web-сайта в Блокноте и удалим из секции ее заголовка код, объявляющий переменные outerIndex и innerText. Они нам больше не потребуются, так что незачем засорять память компьютера ненужными данными.
Потом откроем файл main.js нового Web-сайта, найдем в нем объявление функции selectItem и удалим его. Также удалим выражение, вызывающее эту функцию, из тела функции, которая передается методу onReady объекта Ext. Весь этот код нам больше не понадобится — скрытие и открытие вложенных списков и выделение пунктов полосы навигации мы реализуем по-другому, более "интеллектуально".
Но как?
Прежде всего, мы будем хранить ссылки на выделенный в данный момент пункт полосы навигации и открытый вложенный список. Для этого мы объявим две переменные.
Далее мы напишем функцию, которая станет обработчиком события click пунктов полосы навигации. Эта функция будет выполнять три задачи. Во-первых, она реализует подгрузку содержимого из файла, чей интернет-адрес указан в гиперссылке
пункта меню, на котором щелкнули мышью, и вывод его в контейнере cmain. Во-вторых, она будет делать тексты примеров скрывающимися и открывающимися при щелчке мышью на их первых потомках (для этого мы используем код, написанный в главе 16). В-третьих, она будет управлять скрытием и открытием вложенных списков и выделением пунктов полосы навигации при щелчках на них.
— Если посетитель щелкнул на пункте "внешнего" списка, формирующего полосу навигации, который имеет вложенный список, эта функция:
удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен). Выделенный пункт полосы навигации будет храниться в особой переменной, которую мы собираемся объявить;
скроет открытый ранее вложенный список (если он был открыт и не вложен в пункт, на котором щелкнули мышью, — в этом случае нам нет нужды скрывать его, чтобы тотчас
