Úvodná » kódovanie » Ako vytvoriť aplikáciu RSS Reader v jazyku JavaScript
Ako vytvoriť aplikáciu RSS Reader v jazyku JavaScript
RSS (Really Simple Syndication) je štandardizovaný formát používaný online vydavateľmi syndikovať ich obsah na iné webové stránky a služby. Dokument RSS, tiež známy ako a krmivo, je Dokument XML obsah, ktorý chce vydavateľ distribuovať.
RSS kanály sú k dispozícii na takmer všetkých internetových spravodajských webových stránkach a blogoch pre svojich čitateľov zostaňte v aktuálnom stave s obsahom. Môžu byť tiež nájdené webové stránky bez textu napríklad YouTube, kde môžete použiť zdroj kanálu YouTube o najnovších videách.
Zobrazia sa programy, ktoré pristupujú k týmto kanálom a čítajú a zobrazujú ich obsah Čítačky RSS. V programe JavaScript môžete vytvoriť jednoduchý program na čítanie RSS. V tejto príručke uvidíme ako to.
Štruktúra RSS kanálu
RSS kanál má koreňový prvok volal , podobne ako tag nájdený v dokumentoch HTML. Vnútri tag, existuje a element, druh ako v HTML, že obsahuje mnoho čiastkových prvkov ktoré obsahujú distribuovaný obsah webových stránok.
Krmiva zvyčajne nesú niektoré základné informácie ako je názov, adresa URL a popis webovej stránky a webovej stránky individuálne aktualizované príspevky, články alebo iný obsah tejto internetovej stránky. Tieto informácie sa nachádzajú v </code>, <code><link></code>, a <code><description></code> prvkov, resp.</p> <p>Keď sú tieto značky <strong>priamo prítomné vo vnútri <code><channel></code></strong>, obsahujú názov, adresu URL a popis webovej stránky. Keď sú <strong>prítomný vo vnútri <code><item></code></strong> že <strong>uchováva informácie o aktualizovaných príspevkoch</strong>, predstavujú rovnaké informácie ako predtým, ale údaje o jednotlivých obsahoch <code><item></code> predstavovať.</p> <p>Existujú aj niektoré <strong>voliteľné prvky</strong> ktoré môžu byť prítomné v informačných kanáloch RSS, poskytujúce dodatočné informácie, ako sú obrázky alebo autorské práva na distribuovaný obsah. Môžete sa o nich dozvedieť v tomto <strong>Špecifikácia RSS 2.0</strong> na cyber.harvard.edu.</p> <p>Tu je ukážka toho, ako <strong>RSS kanál na webovej stránke</strong> môže vyzerať takto:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Tipy pre návrh, výučbu a inšpirácieen-usVizualizujte akúkoľvek šablónu CSS s štatistikami CSSČakalo ste niekedy, koľko pravidiel CSS obsahuje štýl? Alebo ste niekedy chceli vidieť ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - najnovšie Alexa-powered Smart zariadeniaAmazon nie je čudný pojem inteligentných domácich systémov s integrovaným digitálnym asistentom. Koniec koncov, ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Načíta sa zdroj
Musíme načítať krmivo s našou aplikáciou čítačky RSS. Na webovej stránke môže byť adresa URL RSS kanálu nájsť vo vnútri značku pomocou Aplikácia / rss + xml typ. Napríklad nájdete nasledujúci odkaz RSS feed na Hongkiat.com.
Po prvé, pozrime sa získať adresu URL informačných kanálov webových stránok pomocou jazyka JavaScript.
fetch (webUrl) .then ((res) => res.text ()) a potom ((htmlTxt) => var domParser = nový DOMParser feedUrl = doc.querySelector ('link [type = "application / rss + xml"]).
načítanie () metóda je globálna metóda asynchrónne získava zdroj. Získa URL adresy zdroja ako argument (URL webovej stránky v našom kóde). to vráti a sľub objekt, takže keď metóda úspešne načíta webovú stránku (tzn sľub je splnená), prvá funkcia vo vnútri potom () výkaz spracováva vytiahnutú odpoveď (res vo vyššie uvedenom kóde).
Vyndaná odpoveď je potom plne čítať do textového reťazca pomocou Text () metóda. Tento text predstavuje HTML text našej načítanej webovej stránky. Páči sa mi to načítanie (), Text () tiež vráti a sľub objekt. Takže, keď úspešne vytvorí text odozvy z toku odpovedí, potom () spracuje tento text odpovede (htmlText vo vyššie uvedenom kóde).
Akonáhle je k dispozícii text HTML stránky, používame ho DOMParser API na analyzovať ho do dokumentu DOM. DOMParser analyzuje textový reťazec XML / HTML do dokumentu DOM. Jeho metóda, parseFromString (), berie dva argumenty: text, ktorý sa má analyzovať a Druh obsahu.
Potom z vytvoreného dokumentu DOM, my nájsť href príslušnej hodnoty štítok pomocou querySelector () pre získanie adresy URL kanála.
Parsovanie a zobrazovanie informačného kanála
Akonáhle sme dostali URL krmivu webových stránok, musíme načítať a čítať dokument RSS nájdené na tejto adrese URL.
(), potom ((xmlTxt) => var domParser = nový DOMParser () nechajte dokument doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('položka') forEach ((položka) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title') textContent document.querySelector ('výstup'). appendChild (h1)))
Rovnako ako sme si vybrali a analyzovali webové stránky, teraz my získať a analyzovať zdroj XML do dokumentu DOM. Na dosiahnutie tohto cieľa používame 'Text / xml' typ obsahu v parseFromString () metóda.
V analyzovanom dokumente sme my vyberte všetky prvky pomocou querySelectorAll metóda a cez každú z nich.
