Homepage » Coding » Come creare un'app Reader RSS in JavaScript

    Come creare un'app Reader RSS in JavaScript

    RSS (Really Simple Syndication) è un formato standard utilizzato dagli editori online per sindacare il loro contenuto ad altri siti Web e servizi. Un Documento RSS, anche conosciuto come a alimentazione, è un Documento XML portando il contenuto che un editore desidera distribuire.

    I feed RSS sono disponibili su quasi tutti i siti di notizie e blog online per i loro lettori rimani aggiornato con i loro contenuti. Possono anche essere trovati su siti Web non testuali come YouTube, dove puoi utilizzare il feed di un canale YouTube informato degli ultimi video.

    Vengono chiamati i programmi che accedono a questi feed e leggono e visualizzano i loro contenuti Lettori RSS. È possibile creare un semplice programma di lettura RSS in JavaScript. In questo tutorial, vedremo come.

    Struttura di un feed RSS

    Un feed RSS ha un elemento radice chiamato , simile al tag trovato nei documenti HTML. Dentro il tag, c'è un elemento, un po 'come in HTML, quello include molti sotto-elementi contenente il contenuto distribuito del sito web.

    Di solito un feed ne trasporta alcuni informazioni di base come titolo, URL e descrizione del sito Web e del singoli post aggiornati, articoli o altri contenuti di quel sito. Queste informazioni sono trovate in </code>, <code><link></code>, e <code><description></code> elementi, rispettivamente.</p> <p>Quando questi tag sono <strong>direttamente presente all'interno <code><channel></code></strong>, contengono il titolo, l'URL e la descrizione del sito web. Quando sono <strong>presente dentro <code><item></code></strong> quello <strong>detiene le informazioni sui post aggiornati</strong>, rappresentano le stesse informazioni di prima ma quella dei singoli contenuti che ciascuna <code><item></code> rappresentare.</p> <p>Ce ne sono anche alcuni <strong>elementi facoltativi</strong> che può essere presente in un feed RSS, fornendo informazioni supplementari come immagini o copyright sul contenuto distribuito. Puoi conoscerli in questo <strong>Specifiche RSS 2.0</strong> a cyber.harvard.edu.</p> <p>Ecco un esempio di come <strong>Feed RSS di un sito Web</strong> potrebbe assomigliare a:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Suggerimenti di design, tutorial e ispirazioni it-it Visualizza qualsiasi foglio di stile CSS con le statistiche CSS Vi siete mai chiesti quante regole CSS ci sono in un foglio di stile? O hai mai desiderato vedere ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show: l'ultimo dispositivo smart alimentato da Alexa Amazon non è estraneo al concetto di sistemi di casa intelligenti con un assistente digitale incorporato. Dopo tutto, il ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Recupero del feed

    Abbiamo bisogno di prendi il feed con la nostra applicazione di lettura RSS. Su un sito web, l'URL di un feed RSS può essere trovato all'interno del tag usando il application / rss + xml genere. Ad esempio, troverai il seguente link del feed RSS su Hongkiat.com.

    Per prima cosa, vediamo come ottieni l'URL del feed di un sito web usando JavaScript.

     fetch (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = new DOMParser () lascia doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [tipo = "applicazione / rss + xml"]'). href)). catch (() => console.error ('Errore nel recupero del sito web'))

    Il fetch () il metodo è un metodo globale recupera in modo asincrono una risorsa. Prende l'URL della risorsa come argomento (l'URL del sito web nel nostro codice). esso restituisce a Promettere oggetto, quindi quando il metodo recupera correttamente il sito Web (ad es Promettere è soddisfatta), la prima funzione all'interno di poi() dichiarazione gestisce la risposta recuperata (res nel codice sopra).

    La risposta recuperata è quindi completamente letto in una stringa di testo usando il testo() metodo. Questo testo rappresenta il Testo HTML del nostro sito web recuperato. Piace fetch (), testo() anche restituisce a Promettere oggetto. Quindi, quando crea con successo un testo di risposta dal flusso di risposta, poi() gestirà il testo di risposta (htmlText nel codice sopra).

    Una volta che il testo HTML del sito web è disponibile, usiamo API DOMParser a analizzarlo in un documento DOM. DOMParser analizza una stringa di testo XML / HTML in un documento DOM. Il suo metodo, parseFromString (), prende due argomenti: il testo da analizzare e il tipo di contenuto.

    Quindi, dal documento DOM creato, noi trovare la href valore del pertinente etichetta usando il querySelector () metodo per ottenere l'URL del feed.

    Analisi e visualizzazione del feed

    Una volta ottenuto l'URL del feed del sito Web, è necessario scarica e leggi il documento RSS trovato a quell'URL.

     fetch (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = new DOMParser () lascia 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))))

    Allo stesso modo in cui abbiamo recuperato e analizzato il sito web, ora siamo noi ottenere e analizzare il feed XML in un documento DOM. Per raggiungere questo, usiamo il 'Text / xml' tipo di contenuto nel parseFromString () metodo.

    Nel documento analizzato, noi seleziona tutto elementi usando il querySelectorAll metodo e loop attraverso ciascuno.

    Dentro ogni elemento, possiamo accedi ai tag piace </code>, <code><description></code>, e <code><link></code>, che stanno portando il contenuto del feed. E, con la nostra semplice applicazione per la lettura di RSS, puoi modellare il contenuto dei feed recuperati come desideri.</p> <h4>Demo Github</h4> <p>Puoi controllare il <strong>versione più dettagliata</strong> del codice utilizzato in questo post nel nostro repository Github. La versione più dettagliata <strong>recupera tre feed</strong> (Mozilla Hacks, Hongkiat e il blog Webkit) <strong>utilizzando un file JSON</strong> e aggiunge anche alcuni stili CSS al lettore RSS.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">Come creare una cartella nascosta in modo nascosto senza software aggiuntivo</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">Come creare una cartella protetta e bloccata in Windows XP</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">Come creare una navigazione reattiva</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolo successivo</div> <div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html"> <img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">Come creare un collegamento di ricerca sul desktop in Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolo precedente</div> <div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html"> <img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">Come creare una routine con Amazon Alexa</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Informazioni utili e suggerimenti per lo sviluppo web. Programmazione, web design, CSS, HTML, JAVASCRIPT. Configurare e reinstallare WINDOWS. Creazione di siti e applicazioni da zero. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>