Как создать приложение для чтения RSS на JavaScript
RSS (Really Simple Syndication) – это стандартизированный формат, используемый онлайн-издателями для передачи своего контента на другие веб-сайты и сервисы. Документ RSS, также известный как канал, – это документ XML, содержащий контент, который издатель хочет распространять.
RSS-каналы доступны почти на всех новостных веб-сайтах и в блогах, чтобы их читатели всегда были в курсе своего содержания. Их также можно найти на нетекстовых веб-сайтах, таких как YouTube, где вы можете использовать канал канала YouTube для получения информации о последних видео.
Читайте также: Как создать логотип RSS-канала с помощью CSS3
Программы, которые получают доступ к этим каналам, читают и отображают их содержимое, называются программами чтения RSS Вы можете создать простую программу для чтения RSS на JavaScript. В этом уроке мы увидим, как это сделать. Структура RSS-канала
У RSS-канала есть корневой элемент, который называется , аналогично тег найден в документах HTML. Внутри тег, есть элемент, вроде как в HTML, который включает в себя множество подэлементов, содержащих распределенный контент сайта.
Фид обычно содержит некоторую основную информацию, такую как заголовок, URL и описание веб-сайта, а также отдельные обновленные публикации, статьи или другое содержимое этого веб-сайта. Эта информация находится в
,<link>, а также <description> элементы соответственно.</p><p>Когда эти теги непосредственно присутствуют внутри <channel>, они содержат заголовок, URL и описание сайта. Когда они присутствуют внутри <item> который содержит информацию об обновленных сообщениях, они представляют ту же информацию, что и раньше, но информацию об отдельном контенте, который каждый <item> представлять.</p><p>Есть также некоторые дополнительные элементы, которые могут присутствовать в RSS-канале, предоставляя дополнительную информацию, такую как изображения или авторские права на распространяемый контент. Вы можете узнать о них в этой спецификации RSS 2.0 на <a rel="nofollow noopener noreferrer" target="_blank" href="https://cyber.harvard.edu/rss/rss.html">cyber.harvard.edu</a>,</p><p>Вот пример того, как может выглядеть RSS-лента веб-сайта:</p><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'><div id="yandex_rtb_R-A-1243617-2"></div> <script type="litespeed/javascript">window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:'yandex_rtb_R-A-1243617-2',blockId:'R-A-1243617-2'})})</script> </div><p><rss version="2.0"><br />
<channel><br /><title>Hongkiathttps://www.hongkiat.com/
Советы по дизайну, учебник и вдохновение ан-нас Визуализация любой таблицы стилей CSS с помощью статистики CSS Когда-нибудь задумывались, сколько правил CSS
находятся в таблице стилей? Или ты когда-нибудь
хотел увидеть…18/05/2017https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/
Amazon Echo Show – новейшее интеллектуальное устройство на базе Alexa Amazon не привыкать к концепции умного дома
системы со встроенным цифровым помощником.
В конце концов, …17/05/2017https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Извлечение корма
Нам нужно получить канал с нашим приложением для чтения RSS. На веб-сайте URL-адрес канала RSS можно найти внутри тег, используя тип приложения / rss + xml. Например, вы найдете следующую ссылку RSS-канала на Hongkiat.com.
Во-первых, давайте посмотрим, как получить URL канала веб-сайта с помощью JavaScript.
fetch (websiteUrl) .then ((res) => {
res.text (). then ((htmlTxt) => {
var domParser = новый DOMParser ()
let doc = domParser.parseFromString (htmlTxt, ‘text / html’)
var feedUrl = doc.querySelector (‘ссылка[type=”application/rss+xml”]«) .Href
})
}). catch (() => console.error (‘Ошибка при загрузке сайта’))
выборки () Метод – это глобальный метод, который асинхронно выбирает ресурс. Он принимает URL ресурса в качестве аргумента (URL сайта в нашем коде). Он возвращает объект Promise, поэтому, когда метод успешно извлекает веб-сайт (т. Е. Обещание выполнено), первая функция внутри оператора then () обрабатывает извлеченный ответ (res в приведенном выше коде).
Читайте также: Начало работы с обещаниями JavaScript
Полученный ответ затем полностью считывается в текстовую строку, используя текст() метод. Этот текст представляет собой HTML-текст нашего загруженного веб-сайта. Как и fetch (), text () также возвращает объект Promise. Таким образом, когда он успешно создает текст ответа из потока ответов, then () будет обрабатывать этот текст ответа (htmlText в приведенном выше коде).
Как только HTML-текст сайта доступен, мы используем DOMParser API разобрать его в документ DOM. DOMParser анализирует текстовую строку XML / HTML в документе DOM. Его метод parseFromString () принимает два аргумента: анализируемый текст и тип содержимого.
Затем из созданного документа DOM мы находим значение href соответствующего тег с помощью querySelector () метод для того, чтобы получить URL-адрес канала.
Разбор и отображение ленты
Как только мы получим URL-адрес канала веб-сайта, нам нужно получить и прочитать документ RSS, найденный по этому URL-адресу.
fetch (feedUrl) .then ((res) => {
res.text (). then ((xmlTxt) => {
var domParser = новый DOMParser ()
let doc = domParser.parseFromString (xmlTxt, ‘text / xml’)
doc.querySelectorAll (‘item’). forEach ((item) => {
let h1 = document.createElement (‘h1’)
h1.textContent = item.querySelector (‘title’). textContent
document.querySelector ( ‘выход’). AppendChild (h1)
})
})
})
Таким же образом, как мы выбирали и анализировали веб-сайт, теперь мы получаем и анализируем XML-канал в DOM-документе. Чтобы достичь этого, мы используем тип содержимого text / xml в методе parseFromString ().
В разобранном документе мы выбираем все элементы, использующие querySelectorAll метод и цикл через каждого.
Внутри каждого элемента мы можем получить доступ к тегам, таким как
Структура RSS-канала