Домашняя » кодирование » Как создать приложение для чтения RSS на JavaScript
Как создать приложение для чтения RSS на JavaScript
RSS (действительно простая синдикация) это стандартизированный формат, используемый онлайн-издателями для синдицировать их содержание на другие сайты и услуги. RSS документ, также известный как кормить, является XML документ с содержанием, которое издатель хочет распространять.
RSS-каналы доступны почти на всех новостных веб-сайтах и в блогах для их читателей. оставаться в курсе их содержания. Их также можно найти на нетекстовые веб-сайты такие как YouTube, где вы можете использовать канал канала YouTube, чтобы быть в курсе последних видео.
Программы, которые получают доступ к этим каналам и читают и отображают их содержимое, называются Читатели RSS. Вы можете создать простую программу для чтения RSS на JavaScript. В этом уроке мы увидим, как.
Структура RSS-канала
RSS лента имеет корневой элемент называется , похож на тег найден в документах HTML. Внутри тег, есть элемент, вроде как в HTML это включает в себя множество подэлементов содержащий распределенный контент сайта.
Корм обычно несет некоторые основная информация такие как заголовок, URL и описание веб-сайта и отдельные обновленные сообщения, статьи или другое содержимое этого сайта. Эта информация находится в </code>, <code><link></code>, а также <code><description></code> элементы соответственно.</p> <p>Когда эти теги <strong>непосредственно присутствует внутри <code><channel></code></strong>, они содержат заголовок, URL и описание сайта. Когда они <strong>присутствует внутри <code><item></code></strong> тот <strong>содержит информацию об обновленных сообщениях</strong>, они представляют ту же информацию, что и раньше, но информацию об отдельном контенте, который каждый <code><item></code> представлять.</p> <p>Есть также некоторые <strong>дополнительные элементы</strong> которые могут присутствовать в ленте RSS, предоставляя дополнительную информацию, такую как изображения или авторские права на распространяемый контент. Вы можете узнать о них в этом <strong>Спецификация RSS 2.0</strong> на cyber.harvard.edu.</p> <p>Вот пример того, как <strong>RSS-лента сайта</strong> может выглядеть так:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Советы по дизайну, учебник и вдохновениеан-насВизуализация любой таблицы стилей CSS с помощью статистики CSSЗадумывались ли вы, сколько правил CSS в таблице стилей? Или вы когда-нибудь хотели увидеть ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - новейшее интеллектуальное устройство на базе AlexaAmazon не привыкать к концепции систем умного дома со встроенным цифровым помощником. В конце концов, ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Извлечение корма
Мы должны получить корм с нашим приложением для чтения RSS. На веб-сайте URL-адрес канала RSS может быть нашел внутри тег с помощью Приложение / Новости + XML тип. Например, вы найдете следующую ссылку RSS-канала на Hongkiat.com.
Во-первых, давайте посмотрим, как получить URL канала веб-сайта используя JavaScript.
fetch (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = new DOMParser () let doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)). catch (() => console.error ('Ошибка при загрузке веб-сайта'))
выборки () Метод является глобальным методом, который асинхронно выбирает ресурс. Он принимает URL ресурса в качестве аргумента (URL сайта в нашем коде). Это возвращает обещание объект, поэтому, когда метод успешно выбирает веб-сайт (т.е. обещание выполняется), первая функция внутри затем() заявление обрабатывает полученный ответ (Рез в приведенном выше коде).
Полученный ответ тогда полностью читать в текстовую строку с использованием текст() метод. Этот текст представляет HTML текст нашего загруженного сайта. подобно выборки (), текст() также возвращает обещание объект. Итак, когда он успешно создает текст ответа из потока ответов, затем() обработает этот текст ответа (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 = new 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 ('output'). appendChild (h1))))
Таким же образом, как мы взяли и проанализировали сайт, теперь мы получить и разобрать канал XML в документе DOM. Для этого мы используем 'Текст / XML' тип содержимого в parseFromString () метод.
В разобранном документе мы выбрать все элементы с использованием querySelectorAll метод и цикл через каждый.
