На этом шаге мы рассмотрим способ получения рассылки.
Для взаимодействия с сервером и получения рассылки мы будем использовать метод $.get(), одну из множества функций поддержки технологии AJAX, имеющихся в библиотеке jQuery. Метод $.get(), как мы уже видели ранее, позволяет оперировать данными, полученными из удаленных источников, с помощью обработчика случая успешного получения данных. Содержимое рассылки передается этому обработчику в формате XML. Благодаря чему мы получаем возможность обрабатывать данные с применением механизма селекторов библиотеки jQuery.
$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('feed.xml', function(data) {
$('rss item', data).each(function() {
// Здесь выполняются действия с элементами новостей.
});
});
});
});
Теперь нам необходимо объединить части элементов в пригодный для использования фрагмент разметки HTML. Для обхода всех элементов рассылки и создания ссылок на новости мы снова можем использовать метод .each():
$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('feed.xml', function(data) {
$('rss item', data).each(function() {
// Здесь выполняются действия с элементами новостей.
var $link = $('<a></a>')
.attr('href', $('link', this).text())
.text($('title', this).text());
var $headline = $('<h4></h4>').append($link);
$('<div></div>')
.append($headline)
.appendTo($container);
});
});
});
});
Мы извлекаем текстовое содержимое элементов <title> и <link> и конструируем из них элементы <а>. Каждая полученная ссылка обертывается элементом <h4>. Каждый заголовок новости помещается в элемент <div id="news-feed">, но, чтобы было проще следить за ходом разработки, мы пока не применяем класс headline к элементам, помещаемым в элемент <div>, как показано на рисунке 1.
Рис.1. Вид контейнера с заголовками новостей
Полный текст этого примера можно взять здесь.На следующем шаге мы закончим изучение этого вопроса.
