So erstellen Sie eine RSS-Reader-App in JavaScript

RSS (Really Simple Syndication) ist ein standardisiertes Format, das von Online-Publishern verwendet wird syndizieren ihren Inhalt zu anderen Websites und Diensten. Ein RSS-Dokument, auch bekannt als a Futter, ist ein XML-Dokument den Inhalt tragen, den ein Verlag verteilen möchte.

RSS-Feeds sind auf fast allen Online-Nachrichten-Websites und -Blogs für ihre Leser verfügbar Bleiben Sie auf dem Laufenden mit ihren Inhalten. Sie können auch auf gefunden werden nicht textbasierte Websites B. bei YouTube, wo Sie den Feed eines YouTube-Kanals verwenden können über die neuesten Videos informiert.

Programme, die auf diese Feeds zugreifen und deren Inhalte lesen und anzeigen, werden aufgerufen RSS-Leser. Sie können ein einfaches RSS-Reader-Programm in JavaScript erstellen. In diesem Tutorial erfahren Sie, wie.

Struktur eines RSS-Feeds

Ein RSS-Feed hat ein Wurzelelement namens , ähnlich wie Tag in HTML-Dokumenten gefunden. In der tag gibt es eine Element, irgendwie ähnlich in HTML das enthält viele unterelemente den verteilten Inhalt der Website enthalten.

Ein Feed trägt normalerweise etwas Grundinformation wie Titel, URL und Beschreibung der Website und der einzelne aktualisierte Beiträge, Artikel oder andere Inhalte dieser Website. Diese Informationen finden Sie in </code>, <code><link></code>, und <code><description></code> Elemente. Wenn diese Tags sind direkt im Inneren vorhanden <code><channel></code>, Sie enthalten den Titel, die URL und die Beschreibung der Website. Wann sie sind innen präsent <code><item></code> Das enthält die Informationen zu den aktualisierten Beiträgen, Sie repräsentieren die gleichen Informationen wie zuvor, jedoch die der einzelnen Inhalte <code><item></code> vertreten. Es gibt auch einige optionale Elemente Dies kann in einem RSS-Feed enthalten sein und zusätzliche Informationen wie Bilder oder Urheberrechte an den verteilten Inhalten enthalten. Sie können hierüber lernen RSS 2.0-Spezifikation bei cyber.harvard.edu. Hier ist ein Beispiel wie RSS-Feed einer Website könnte so aussehen: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Designtipps, Tutorial und Inspirationen en-uns Visualisieren Sie jedes CSS-Stylesheet mit CSS-Statistiken Haben Sie sich jemals gefragt, wie viele CSS-Regeln in einem Stylesheet enthalten sind? Oder wollten Sie schon immer mal sehen ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Das neueste Smart-Gerät von Alexa Das Konzept der Smart Home-Systeme mit einem eingebetteten digitalen Assistenten ist Amazon nicht unbekannt. Immerhin ist das… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Feed abrufen`

 Wir müssen Holen Sie den Feed mit unserer RSS-Reader-Anwendung. Auf einer Website kann die URL eines RSS-Feeds sein im Inneren gefunden  tag mit der Anwendung / RSS + XML Art. Zum Beispiel finden Sie den folgenden RSS-Feed-Link auf Hongkiat.com.
   
 Zuerst wollen wir mal sehen, wie es geht Ruft die Feed-URL einer Website ab mit JavaScript.
  fetch (websiteUrl) .then ((res) => res.text (). dann ((htmlTxt) => var domParser = neuer DOMParser () und doc = domParser.parseFromString feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)). catch (() => console.error ('Fehler beim Abrufen der Website')) 
 Das holen() Methode ist eine globale Methode, die ruft asynchron eine Ressource ab. Es verwendet die URL der Ressource als Argument (die URL der Website in unserem Code). Es kehrt zurück Versprechen Objekt, also, wenn die Methode die Website erfolgreich abruft (d. h Versprechen erfüllt ist), die erste Funktion innerhalb der dann() Aussage verarbeitet die abgerufene Antwort (res im obigen Code).
  Die abgerufene Antwort lautet dann vollständig in eine Zeichenfolge eingelesen Verwendung der Text() Methode. Dieser Text steht für die HTML-Text unserer abgerufenen Website. Mögen holen(), Text() ebenfalls kehrt zurück Versprechen Objekt. Wenn also erfolgreich ein Antworttext aus dem Antwortstrom erstellt wird, dann() behandelt diesen Antworttext (htmlText im obigen Code).
 Sobald HTML-Text der Website verfügbar ist, verwenden wir diesen DOMParser-API zu parsen Sie es in ein DOM-Dokument. DOMParser parst eine XML / HTML-Textzeichenfolge in ein DOM-Dokument. Seine Methode, parseFromString (), nimmt zwei argumente: das zu analysierender Text und das Inhaltstyp.
 Dann werden wir aus dem erstellten DOM-Dokument heraus finde das href Wert des relevanten  Etikett Verwendung der querySelector () Methode, um die URL des Feeds abzurufen.
 Analysieren und Anzeigen des Feeds
 Sobald wir die Feed-URL der Website erhalten haben, müssen wir das tun RSS-Dokument abrufen und lesen unter dieser URL gefunden.
  fetch (feedUrl) .then ((res) => res.text (). dann ((xmlTxt) => var domParser = neuer DOMParser () und doc = domParser.parseFromString (xmlTxt, text / xml ') .querySelectorAll ('item'). forEach ((item) => lassen h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 So wie wir die Website abgerufen und analysiert haben, so wie wir Rufen Sie den XML-Feed ab und parsen Sie ihn in ein DOM-Dokument. Um dies zu erreichen, verwenden wir die 'text / xml' Inhaltstyp in der parseFromString () Methode.
 In dem analysierten Dokument haben wir Alle auswählen  Elemente Verwendung der querySelectorAll Methode und durchlaufen.
 In jedem Element können wir Zugriff auf Tags mögen </code>, <code><description></code>, und <code><link></code>, die den Feed-Inhalt tragen. Mit unserer einfachen RSS-Reader-Anwendung können Sie den Inhalt der abgerufenen Feeds beliebig gestalten.</p> <h4>Github Demo</h4> <p>Sie können das überprüfen <strong>detailliertere Version</strong> des in diesem Beitrag verwendeten Codes in unserem Github-Repo. Die detailliertere Version <strong>ruft drei Feeds ab</strong> (Mozilla Hacks, Hongkiat und das Webkit-Blog) <strong>mit einer JSON-Datei</strong> und fügt dem RSS-Reader auch einige CSS-Stile hinzu.</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">So erstellen Sie einen geheim versteckten Ordner ohne zusätzliche Software</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">So erstellen Sie einen gesicherten und gesperrten Ordner 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">So erstellen Sie eine Responsive Navigation</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">Nächste Artikel</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">So erstellen Sie eine Suchverknüpfung auf dem Desktop in Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Vorheriger Artikel</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">So erstellen Sie eine Routine mit 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">
			Nützliche Informationen und Tipps zur Webentwicklung. Programmierung, Webdesign, CSS, HTML, JAVASCRIPT. Konfigurieren und installieren Sie WINDOWS neu. Erstellung von Websites und Anwendungen von Grund auf neu.
		</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>