Kako ustvariti aplikacijo RSS Reader v JavaScriptu

RSS (Really Simple Syndication) je standardizirana oblika, ki jo uporabljajo spletni izdajatelji njihovo vsebino na druge spletne strani in storitve. An RSS dokument, znan tudi kot a krme, je XML dokument vsebino, ki jo želi izdajatelj distribuirati.

Viri RSS so na voljo na skoraj vseh spletnih straneh s spletnimi novicami in blogih, na katere lahko bralci ostanite na tekočem z njihovo vsebino. Lahko jih najdete tudi na spletne strani brez besedila na primer YouTube, kjer lahko uporabite vir kanala YouTube obveščeni o najnovejših videih.

Pokličejo se programi, ki dostopajo do teh virov in berejo ter prikazujejo njihovo vsebino Bralniki RSS. V JavaScriptu lahko ustvarite preprost program za bralnik RSS. V tej vadnici bomo videli, kako.

Struktura vira RSS

Vir RSS ima korenski element imenuje , podobne v dokumentih HTML. V notranjosti oznaka, obstaja element, nekako podoben v HTML, to vključuje veliko podelementov vsebujejo distribuirano vsebino spletnega mesta.

Krma ponavadi nosi nekaj Osnovni podatki kot so naslov, URL in opis spletne strani in spletnega mesta posamezne posodobljene objave, članke ali druge vsebine spletne strani. Te informacije najdete v </code>, <code><link></code>, in <code><description></code> elementov. Ko so te oznake neposredno prisotni v notranjosti <code><channel></code>, imajo naslov, URL in opis spletne strani. Ko so v notranjosti <code><item></code> to vsebuje podatke o posodobljenih objavah, predstavljajo enake informacije kot prej kot za posamezne vsebine <code><item></code> zastopajo. Obstaja tudi nekaj neobvezni elementi ki so lahko prisotni v viru RSS, zagotavljajo dodatne informacije, kot so slike ali avtorske pravice za distribuirano vsebino. O tem se lahko naučite v tem Specifikacija RSS 2.0 na cyber.harvard.edu. Tukaj je vzorec kako RSS vir spletne strani lahko izgleda: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Design Tips, Tutorial in Inspirations en-us Vizualizirajte vse sloge CSS s statistiko CSS Ste se kdaj vprašali, koliko pravil CSS je v slogu slogov? Ali si že kdaj želel videti ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - najnovejša pametna naprava, ki jo poganja Alexa Amazon ni čuden koncept pametnih sistemov doma z vgrajenim digitalnim pomočnikom. Navsezadnje ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Pridobivanje krme`

 Moramo prenesite vir z uporabo našega bralnika RSS. Na spletnem mestu je lahko URL vira RSS v notranjosti  z oznako application / rss + xml vrsto. Na primer, na spletnem mestu Hongkiat.com boste našli naslednjo povezavo vira RSS.
   
 Najprej poglejmo, kako dobite URL vira spletnega mesta z uporabo JavaScripta.
  potem ((res) => res.text ().), nato ((htmlTxt) => var domParser = novo DOMParser () naj doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('povezava [type = "application / rss + xml"]'). href)) catch (() => console.error ("Napaka pri pridobivanju spletnega mesta")) 
 The prinesi () metoda je globalna metoda, ki asinhrono pridobiva vir. URL vira vzame kot argument (URL spletne strani v naši kodi). To vrne a Obljubi predmet, tako da, ko metoda uspešno pridobi spletno mesto (tj Obljubi je izpolnjena), prva funkcija znotraj nato () izjavo obravnava pridobljeni odziv (res v zgornji kodi).
  Prevzeti odziv je potem v celoti prebral v besedilni niz uporabljati besedilo () metodo. To besedilo predstavlja Besedilo HTML našega pridobljenega spletnega mesta. Kot prinesi (), besedilo () prav tako vrne a Obljubi predmet. Torej, ko je uspešno ustvaril odzivno besedilo iz odzivnega toka, nato () bo obravnaval to besedilo odgovora (htmlText v zgornji kodi).
 Ko je besedilo HTML spletnega mesta na voljo, ga uporabljamo API DOMParser do razčleniti v dokument DOM. DOMParser razčleni besedilni niz XML / HTML v dokument DOM. Njegova metoda, parseFromString (), traja dva argumenta: besedilo, ki ga želite razčleniti in vrsto vsebine.
 Nato iz ustvarjenega dokumenta DOM Poišči href vrednosti zadevnega  oznaka uporabljati querySelector () za pridobitev URL-ja vira.
 Razčlenjevanje in prikazovanje vira
 Ko dobimo URL vira spletnega mesta, moramo to storiti pridobivanje in branje dokumenta RSS najdete na tem URL-ju.
  fetch (feedUrl) .potem ((res) => res.text ().) ((xmlTxt) => var domParser = novo DOMParser () naj doc = domParser.parseFromString (xmlTxt, 'text / xml') doc forEach ((item) => naj h1 = document.createElement ('h1') h1.textContent = item.querySelector ('naslov'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Na enak način, kot smo naredili in razčlenili spletno stran, zdaj smo dobite in razčlenite vir XML v dokument DOM. Da bi to dosegli, uporabljamo "text / xml" vrsto vsebine v parseFromString () metodo.
 V razčlenjenem dokumentu izberite vse  elementov uporabljati querySelectorAll metodo in prekrižite vsakega.
 V vsakem elementu lahko dostopnih oznak podobno </code>, <code><description></code>, in <code><link></code>, ki vsebujejo krmo. Naša preprosta aplikacija za branje RSS je narejena, tako da lahko slog vsebine pridobljenih virov hranite po vaši želji.</p> <h4>Github demo</h4> <p>Lahko preverite <strong>podrobnejša različica</strong> kode, ki se uporablja v tej objavi v našem Github repo. Podrobnejša različica <strong>dobi tri vire</strong> (Mozilla Hacks, Hongkiat in spletni dnevnik Webkit) <strong>z uporabo datoteke JSON</strong> in bralniku RSS doda tudi nekaj stilov CSS.</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">Kako ustvariti skrivaj prikrito mapo brez dodatne programske opreme</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">Kako ustvariti zaščiteno in zaklenjeno mapo v operacijskem sistemu 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">Kako ustvariti odzivno krmarjenje</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">Naslednji članek</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">Kako ustvariti bližnjico iskanja na namizju v sistemu Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Prejšnji članek</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">Kako ustvariti rutinsko z 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">
			Koristne informacije in nasveti za razvoj spleta. Programiranje, spletni dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte in znova namestite WINDOWS. Izdelava spletnih mest in aplikacij iz nič.
		</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>