12.09.13, 10:20
0 комментарий
  Уроки

Создаем автоматизированную RSS-ленту при помощи jQuery

Обычно процесс разработки динамической ленты новостей требует использования языка разработки внутренних интерфейсов. Очевидно, все может оказаться очень простым, если вы знакомы с Rails или PHP, но мы хотели бы представить вам метод отображения RSS-ленты с использованием jQuery. Проблема заключается в том, как осуществить доступ к ajax-запросам с внешнего сервера, а затем конвертировать эту XML-информацию в нечто такое, что было бы просто прочесть.

Мы сконцентрируемся на Feed API от Google, работать с которым гораздо проще, чем кажется. Здесь есть несколько возможностей, позволяющих обыграть некоторые опции и получить доступ к другим шаблонам. Нам нужно лишь отобразить первую страницу записей в ленте в виде заголовок+URL. Как только вы заставите этот скрипт работать, вы сможете без труда оформить внешний вид, и даже частично включить в ленту новостей контент. Ниже вы можете ознакомиться с демо, чтобы понять, над чем мы сегодня будем работать.

Приступаем

Первый этап заключается в разработке базового документа с интегрированной jQuery-библиотекой. Мы воспользуемся несколькими функциями, приведенными в Stack Overflow, которые помогут нам добиться работоспособности RSS-ленты. Обычно, при написании веб-приложения вроде этого, вам нужно осуществлять доступ к кросс-доменному парсингу посредством языка разработки внутренних интерфейсов. Для веб-разработчиков проблему обычно решает язык PHP.

Так как здесь мы используем Feed API, он и займет место скрипта на серверной стороне. Таким образом, все можно будет считывать посредством jQuery Ajax, а затем конвертировать в JSON, что будет гораздо проще парсить. Давайте взглянем на шапку нашего документа, которая включает jQuery, а также кастомный скрипт parser.js.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Automated jQuery RSS Feed Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/parser.js"></script>
</head>


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

<div id="w">
  <div id="content">
    <h1>Automated jQuery RSS Feed Listing</h1>
     
    <div id="nouperss" class="feedcontainer"></div>
    <hr>
    <div id="hongkiatrss" class="feedcontainer"></div>
    <hr>
    <div id="designmodorss" class="feedcontainer"></div>
    <hr>
    <div id="codropsrss" class="feedcontainer"></div>
  </div><!-- @end #content -->
</div><!-- @end #w -->


Это и есть все содержимое тела документа. Каждый класс .feedcontainer используется для применения одних и тех же стилей к заголовкам и ссылкам. ID-имена указываются при помощи jQuery, и таким образом у нас есть возможность запускать собственные RSS-функции, а затем извлекать новый контент при помощи метода .html().

RSS-парсинг в jQuery

Мы можем пропустить большую часть CSS-стилей, так как они очень просты. Взгляните на нашу таблицу стилей, если вам хочется увидеть, как реализуется выравнивание. Но давайте перейдем к parser.js, где у нас можно видеть две функции, одна из которых специфическим образом отвечает за конверсию RSS-JSON. Другая отвечает за то, чтобы атрибут “title” в RSS-ленте автоматически выводился в верхнем регистре.

function parseRSS(url, container) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //console.log(data.responseData.feed);
      $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>');
 
      $.each(data.responseData.feed.entries, function(key, value){
        var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>';
        $(container).append(thehtml);
      });
    }
  });
}


Такая функция parseRSS() была приведена в похожем вопросе к Stack Overflow, и она представляет собой отличное решение, которое работает только с jQuery. Нам по прежнему нужен будет сервер, так как метод .ajax() не может происходить без HTTP-потока. Но вам не потребуется поддержка каких-либо других языков разработки внутренних интерфейсов. В целом, мы можем доверить Google работу с этим ресурсом, так как он незаменим для разработчиков.

Код функции довольно прост и понятен, если вы знакомы с .ajax(). Сперва мы вносим в запрос URL, который представляет собой ссылку на удаленный Google Feed API. Нам нужно, чтобы dataType был выставлен на JSON, и после успешного ajax-запроса мы можем запустить новую функцию для отображения HTML-содержимого. Обратите внимание на то, что параметр, который мы вносим, называется data, и он содержит в себе JSON-ответ.

Цикл Response

Обратите также внимание на то, что мы оставили комментарий у кода console.log(data.responseData.feed) на случай, если вы захотите отобразить результат всего содержимого JSON. Вы можете показать нечто более, чем просто заголовок и URL. Но мы специально привели пример таким образом. У вас есть возможность добавлять и другой контент по собственному усмотрению, прямо при помощи данной функции.

Внутри функции успешного ajax-запроса мы встроили цикл .each(), который проходит по пунктом внутри ленты. Учтите, что доступ к этому массиву может быть осуществлен из data.responseData.feed.entries, который мы преобразуем в пару ключ-значение. Здесь все очень просто, так как нам нужна всего лишь одна переменная string для содержания HTML. Затем, при помощи jQuery .append(), весь контент добавляется на страницу.

Title не входит в цикл .each() потому, что он должен добавляться с каждым результатом в ленте. Но здесь также используется другая кастомная функция, предназначенная для перевода в верхний регистр первой буквы каждой javascript-строки. Некоторые RSS-рассылки предоставляют заголовки только в нижнем регистре, что может выглядеть несерьезно и, как минимум, странно. Давайте взглянем на очень коротенький код функции.

function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}


Помните, что RSS-рассылки могут предоставлять гораздо больше информации для публикации. Иногда вы даже сможете использовать миниатюры публикаций, встроенные в XML. Это позволит вам отображать эти изображения внутри вашего RSS-приложения. Возможности здесь практически безграничны.

Подытожим

RSS-ленты сегодня до сих пор остаются очень популярными среди веб-разработчиков, так как представляют собой отличный метод передачи данных между веб-сайтами. Это позволяет интернет-маркетологам без труда публиковать обновления в Twitter или Facebook прямо с сайта посредством RSS-рассылки. Мы рекомендуем вам скачать исходный код нашего примера, и внимательно его изучить. Вдобавок, вы можете понять, сможете ли вы использовать подобный функционал в собственных сайтах и проектах.

Исходники в архиве.

СКАЧАТЬ

Вес файла
3.49 Kb

Напишите своё мнение