530 Часть IV Ajaxe примерах

Рис. 13.7. Применение правил CSS к нижнему колонтитулу

13.3.Загрузка RSS-лент

Вданном примере мы будем загружать файлы из нескольких лент. Для этого будет задействован объект ContentLoader (как и во всех остальных примерах книги). В первой версии разрабатываемого приложения просмотра RSS-лент мы используем ряд глобальных переменных.

13.3.1. Глобальный уровень

Глобальные переменные позволяют легко настраивать сценарий, чтобы нам не приходилось менять функциональные возможности внутри циклов for и таймеров. Возможность настройки содержимого глобальных переменных позволит вносить глобальные изменения в сценарий и осуществлять связь различных функций. Сейчас нам удобнее использовать именно глобальные, а не локальные переменные, поскольку они "открыты" для всех функций и можно не думать о возможности передачи информации из одной функции в другую. Позже в данной главе мы реструктуризируем сценарий и представим решение без использования глобальных переменных; сейчас же они просто облегчают нам разработку.

Одним из недостатков JavaScript является отсутствие типов переменных Для констант, поэтому мы имитируем их с помощью глобальных переменных. Однако следует помнить, что значения глобальных переменных могут перезаписываться, поэтому использовать их следует очень осторожно. Переменные, приведенные в листинге 13.5, в процессе работы нашего приложения никак меняться не будут.

Глава 13 Создание приложений Ajax, не использующих с&рвер 53"!

Листинг 13.5. Глобальные переменные с постоянным значением

var flipLength = 5000; var timeColor = 100; var strErrors = "<hr/>Error List: <br/>" var arrayRSSFeeds = new Array(

"http://radio.javaranch.com/news/rss.xml",

"http://radio.3avaranch.com/pascarell0/rss.xml",

"http://radio.]avaranch.com/bear/rss.xml",

"http://radio.3avaranch.c0m/lasse/rss.xml");

В листинге 13.5 мы определяем глобальные переменные, задающие функционирование нашего приложения. Первая глобальная переменная, f l i - pLength, определяет, сколько миллисекунд будет отображаться текущее сообщение до того, как оно заменится следующим. В данном случае время, проходящее между сменой сообщений, составляет 5000 миллисекунд. Следующая переменная-таймер — timeColor — задает время в миллисекундах между этапами "раскрашивания" нашего сценария. Чем больше ее значение, тем дольше переход.

Далее определяется глобальная переменная strErrors. Здесь формируется заголовок сообщений об ошибках, возникающих в процессе загрузки Стиль данного сообщения можно изменить; кроме того, с ним можно связать параметры стиля. Последняя глобальная переменная, влияющая на выполнение сценария, представляет собой массив arrayRSSFeeds. В данный массив мы добавляем URL лент RSS, которые нас интересуют. В данном случае мы обращаемся к четырем различным лентам RSS из радиоблогов JavaRanch.com.

Следующий набор глобальных переменных, представленный в листинге 13.6, используется для передачи данных между отдельными функциями Эти переменные хранят состояние приложения чтения RSS-лент Их значения изменяются согласно выполняемому действию.

Листинг 13.6. Глобальные переменные, содержащие информацию о состоянии

Первая глобальная переменная, значение которой задается в листинге 13.6, — currentMessage. Она отслеживает сообщение, просматриваемое в текущий момент. В каком-то смысле ее можно считать счетчиком, который обнуляется при достижении максимального числа записей. Следующая глобальная переменная layerFront содержит состояние наших слоев. Разрабатывая структуру RSS-клиента, мы наложили друг на друга два слоя. Состояние этих слоев отслеживается в переменной layerFront.

532 Часть IV. Ajax в примерах

Переменная timerSwitch содержит таймер, определяющий, когда приходит время загрузки следующего фрейма. Если пользователь щелкает на кнопке паузы, таймер сбрасывается и изменяется состояние переменной bPaused. Булево значение этой переменной позволяет определять состояние таймера: true — пауза, false — запущен.

Глобальная переменная arrayMessage содержит отформатированные сообщения, извлекаемые из элементов RSS. Этот многомерный массив хранит всю информацию, которую мы желаем отобразить на экране. Как отмечалось ранее, элементы статей содержат больше информации, чем нам может потребоваться, поэтому мы выбираем только несколько интересующих нас позиций и отображаем их в переменной arrayMessage.

Последняя переменная, intLoadFile, приводит нас к следующему блоку кода. Она представляет собой счетчик, содержащий число текущих файлов, извлекаемых из массива arrayRSSFeeds в процессе предварительной загрузки.

Объявив все глобальные переменные, мы уже видим, к чему идет данный проект. Мы предварительно загружаем RSS-ленты из массива URL. Для отслеживания состояния этого процесса используется счетчик. В ходе предварительной загрузки из каждого XML-файла мы выбираем только необходимую информацию. После завершения процесса сообщения отображаются попеременно, плавно переходя друг в друга, — создается слайд-шоу, которым мы можем управлять (в частности, приостанавливать). Используя объявленные глобальные переменные, мы можем контролировать функциональные возможности сценария. Таким образом, мы логически подходим к разработке функции предварительной загрузки RSS-лент.

13.3.2. Предварительная загрузка средствами Ajax

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

Формирование запросов

Объект ContentLoader позволяет механизму очереди упорядоченно обрабатывать запросы. В листинге 13.7 показано, что мы берем массив (заполненный в момент загрузки страницы; см. листинг 13.5), который содержит URL лент, и подготавливаем их для объекта ContentLoader.

Листинг 13.7. Функция JavaScript предварительной загрузки

window.onload = function(){ var loader= new Array() for(i=O;i<arrayRSSFeeds.length;i++){

loader[loader.length] = new net.ContentLoader(arrayRSSFeeds[i], BuildXMLResults,BuildError);}}

Глава 13. Создание приложений Ajax, не использующих сервер 533

Код, приведенный в листинге 13.7, срабатывает согласно обработчику событий onload. При загрузке страницы мы подготавливаем переменную массива loader, которая будет содержать все запросы к серверу. Мы циклически проходим по массиву arrayRSSFeeds и получаем все указатели URL RSSлент, из которых желаем получать информацию. При каждой итерации мы увеличиваем массив loader, включая в него новый запрос ContentLoader. Затем передаем массиву URL ленты, функцию BuildXMLResults(), форматирующую содержимое, и функцию BuildError (), которая будет вызываться в случае ошибки. Разобравшись с запуском процесса загрузки, мы можем переходить к форматированию возвращаемых XML-лент.

Адаптация функции

В процессе запроса мы должны вызвать либо функцию BuildXMLResults() (если запрос прошел успешно), либо BuildError () (если возникли какие-либо проблемы). Функция BuildXMLResults О принимает XML-ленту и форматирует ее в удобный формат. Функция BuildError () записывает ошибку в список ошибок. Обе функции обновляют состояние, чтобы мы могли видеть ход процесса загрузки. Реализация описанной логики приведена в листинге 13.8.

Листинг 13.8. Форматирование XML-результатов в форме массива JavaScript

f -unction BuildXMLResults () {

var xmlDoc = this.req.responseXML.documentElement; var RSSTitle =

xmlDoc.getElementsByTagName('title')[0].firstChild.nodeValue; var xRows = xmlDoc.getElementsByTagName('item') ;

for (iOO; iCXxRows . length; iC++) { intMessage = arrayMessage.length; arrayMessage[intMessage] = new Array( RSSTitle,

xRowsfiC] .getElementsByTagName{'title') {0]

.firstChild.nodeValue, xRows[iC].getElementsByTagName('link' ) [0]

.firstChild,nodeValue,

xRowsfiC].getElementsByTagName('description')[0]

.firstChild.nodeValue);

}

UpdateStatusO;

Функция BuildXMLResults (), приведенная в листинге 13.8, извлекает документ XML, обращаясь к свойству responseXML объекта запроса. Сохранив документ XML в локальной переменной xmlDoc, мы можем получить для ленты информацию о названии RSS-ленты. Для этого мы обращаемся к дескриптору элемента названия и берем значение первого дочернего узла.

Далее мы получаем элементы статей и подготавливаем цикл для прохода по полученному массиву, записанному в xRows. Последовательно проходя данный массив, мы можем создать многомерный массив, сохранив его в следующей ячейке нашего глобального массива arrayMessage. Этот глобальный массив содержит название RSS-ленты, а также заголовок, ссылку и описание

534 Часть IV Ajax в примерах

статьи. Указанный многомерный массив создается для каждого элемента стагьи, записанного в xRows. Завершив обход документа, мы вызываем функцию UpdateStatus () (листинг 13 9) для показа пользователю текущего состояния процесса .

Листинг 13,9. Функция, сообщающая о ходе предварительной загрузки

function UpdateStatus(){ intLoadFile++;

if{intLoadFile < arrayRSSFeeds.length){ document.get£lementById("divNews2").innerHTML -

"Loaded File " + intLoadFile + " of " + arrayRSSFeeds-length + strErrors;

Jelse if(intLoadFile >= arrayRSSFeeds.length && 'bLoadedOnce){ document.getEleraentByldf"divNews2").innerHTML =

"Loading Completed" + strErrors; if{arrayMessage.length == 0){

дующее. Во-первых, отображает пользователю состояние объекта предварительной загрузки; во-вторых, определяет, требуется ли начать слайд-шоу. Итак, прежде всего мы увеличиваем на единицу значение глобальной переменной intLoadFile, обновляя счетчик файлов. Если значение intLoadFile меньше общего числа загружаемых файлов, для отображения состояния загрузки мы задаем свойство innerHTML верхнего слоя элемента divNews2 равным выходной строке.

Если счетчик файлов больше или равен числу файлов в массиве (а слайдшоу еще не запущено), тогда мы можем запускать переходы между лентами. Однако перед началом слайд-шоу необходимо проверить, есть ли у нас вообще данные для отображения. Для этого проверяется длина отформатированного массива сообщений arrayMessage. Если сообщений нет, мы сообщаем об этом пользователю и завершаем выполнение функции, возвращая значение false.

Если имеются данные для отображения, значение bLoadedOnce устанавливается равным true и после небольшой паузы вызывается функция Changeview(). Пауза нужна для того, чтобы пользователь успел прочесть возможные сообщения об ошибках. Как отмечалось ранее, если функциязагрузчик столкнется с проблемами в процессе загрузки XML-документа, она вызовет функцию BuildError() (листинг 13.10).

Листинг 13.10. Обработка ошибок, сгенерированных XMLHttpRequest

function BuildError(){

} strErrors += "Error:" + "" + "<br/>"; UpdateStatus();