RSS (Really Simple Syndication) is een gestandaardiseerd formaat dat wordt gebruikt door online uitgevers om syndicaat hun inhoud naar andere websites en services. Een RSS-document, ook bekend als a voeden, is een XML-document het dragen van de inhoud die een uitgever wenst te verspreiden.
RSS feeds zijn beschikbaar op bijna alle online nieuwswebsites en blogs voor hun lezers blijf up-to-date met hun inhoud. Ze zijn ook te vinden op niet-tekst gebaseerde websites zoals YouTube, waar je de feed van een YouTube-kanaal kunt gebruiken op de hoogte gehouden van de nieuwste video's.
Programma's die toegang hebben tot deze feeds en die de inhoud ervan lezen en weergeven, worden gebeld RSS-lezers. U kunt een eenvoudig RSS-lezerprogramma maken in JavaScript. In deze zelfstudie zien we hoe.
Structuur van een RSS-feed
Een RSS-feed heeft een rootelement riep , vergelijkbaar met de tag gevonden in HTML-documenten. Binnen in de tag, er is een element, een beetje zoals in HTML, dat bevat veel subelementen met de gedistribueerde inhoud van de website.
Een feed heeft meestal wat basis informatie zoals de titel, URL en beschrijving van de website en van de individuele bijgewerkte berichten, artikelen of andere inhoud van die website. Deze informatie is te vinden in </code>, <code><link></code>, en <code><description></code> elementen, respectievelijk.</p> <p>Wanneer deze tags zijn <strong>direct aanwezig binnen <code><channel></code></strong>, ze bevatten de titel, URL en beschrijving van de website. Wanneer ze zijn <strong>aanwezig binnen <code><item></code></strong> dat <strong>bevat de informatie over de bijgewerkte berichten</strong>, ze vertegenwoordigen dezelfde informatie als voorheen maar die van de individuele inhoud die elk bevat <code><item></code> vertegenwoordigen.</p> <p>Er zijn er ook enkele <strong>optionele elementen</strong> die mogelijk aanwezig is in een RSS-feed en aanvullende informatie biedt, zoals afbeeldingen of auteursrechten op de gedistribueerde inhoud. Je kunt hier meer over leren <strong>RSS 2.0-specificatie</strong> op cyber.harvard.edu.</p> <p>Hier is een voorbeeld van hoe het <strong>RSS-feed van een website</strong> kan er als volgt uitzien:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Ontwerptips, zelfstudie en inspiratiesnl-nlVisualiseer elke CSS-stylesheet met CSS-statistiekenHeeft u zich ooit afgevraagd hoeveel CSS-regels er in een stylesheet zitten? Of heb je ooit willen zien ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Het nieuwste slimme apparaat van AlexaAmazon is niet vreemd aan het concept van slimme huissystemen met een ingebouwde digitale assistent. De ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
De feed ophalen
We moeten haal de feed met onze RSS reader-applicatie. Op een website kan de URL van een RSS-feed zijn gevonden in de tag met behulp van de application / rss + xml type. U vindt bijvoorbeeld de volgende RSS-feedkoppeling op Hongkiat.com.
Laten we eerst eens kijken hoe ontvang de feed-URL van een website met behulp van 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 ('Fout bij het ophalen van de website'))
De ophalen () methode is een globale methode die haalt asynchroon een resource op. Het neemt de URL van de bron als een argument (de URL van de website in onze code). Het geeft a terug Belofte object, dus wanneer de methode de website met succes ophaalt (dus Belofte is vervuld), de eerste functie binnen de dan() uitspraak handelt het opgehaalde antwoord af (res in bovenstaande code).
Het opgehaalde antwoord is dan volledig ingelezen in een tekstreeks de ... gebruiken tekst() methode. Deze tekst vertegenwoordigt de HTML-tekst van onze opgehaalde website. Net zoals ophalen (), tekst() ook geeft a terug Belofte voorwerp. Dus wanneer het met succes een antwoordtekst uit de reactiestream maakt, dan() zal die antwoordtekst behandelen (htmlText in bovenstaande code).
Zodra HTML-tekst van de website beschikbaar is, gebruiken wij DOMParser API naar ontleed het in een DOM-document. DOMParser parseert een XML / HTML-tekststring in een DOM-document. Zijn methode, parseFromString (), neemt twee argumenten: de tekst die moet worden geparseerd en de inhoudstype.
Vervolgens, vanuit het gemaakte DOM-document, wij vind de href waarde van de relevante label de ... gebruiken querySelector () methode om de URL van de feed te krijgen.
De feed parseren en weergeven
Zodra we de feed-URL van de website hebben ontvangen, moeten we dit doen haal het RSS-document op en lees het gevonden op die URL.
fetch (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = nieuwe DOMParser () laat doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item'). ForElke ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))
Op dezelfde manier als we de website hebben opgehaald en geparseerd, nu wij download en ontleed de XML-feed in een DOM-document. Om dit te bereiken, gebruiken we de 'Text / xml' inhoudstype in de parseFromString () methode.
In het geparseerde document, wij selecteer alle elementen de ... gebruiken querySelectorAll methode en loop door elk.
