Das Erstellen eines RSS-Feed-Readers mit jQuery und jGFeed

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Dieses Tutorial zeigt Ihnen, wie Sie mit jQuery und dem jGFeed-Plugin Newsfeeds aus der Ferne abrufen und die Ergebnisse in das Markup schreiben. jGFeed ist ein jQuery-Plugin, mit dem Sie "jeden" RSS-Feed von "jedem" Host abrufen und ein JSON-Objekt zur einfachen Verwendung zurückgeben können.

Dieses Tutorial hat einen Screencast, der Tuts+ Premium-Mitgliedern zur Verfügung steht.

Der Beispielcode in diesem Lernprogramm funktioniert nicht in Internet Explorer 7 oder früher, wurde jedoch erfolgreich in Firefox, Safari, Chrome und IE8 getestet.

Schritt 1: Organisieren der Dateien für das Tutorial

Bevor wir mit dem Schreiben von Code beginnen, erstellen wir ein Verzeichnis, in dem die Feedreader-Dateien abgelegt werden. Ich habe auf meinem Desktop ein Verzeichnis mit dem Namen "feedreader" erstellt. Erstellen Sie in diesem Verzeichnis ein weiteres Verzeichnis namens Assets.

Wir müssen auch eine Kopie der jGFeed-Quelle herunterladen. Das können Sie hier tun. In diesem Beispiel habe ich die komprimierte Version der Datei heruntergeladen und im Verzeichnis "Assets" abgelegt.

Zuletzt erstellen wir einige leere Textdateien, in denen Markup, Javascript und Stile gespeichert sind. Ich habe folgende Dateistruktur erstellt:

  
|-- assets |  
|-- feedreader.js |  
|-- jquery.jgfeed-min.js |  
`-- styles.css  
`-- index.html

Die Dateistruktur sollte ungefähr so aussehen:

Beachten Sie, dass index.html, feedreader.js und styles.css zu diesem Zeitpunkt leer sein sollten.

Schritt 2: Das Markup

Unser Markup für dieses Tutorial wird sehr einfach sein, und wir gehen davon aus, dass Sie bereits HTML kennen. Deshalb werden wir alles auf einmal vorstellen.

In unserer index.html-Datei verlinken wir auf das Stylesheet, das wir später zum Stylen des Feed-Readers verwenden, fügen dann eine Liste mit Links zu den Feeds hinzu, die wir erhalten möchten, und fügen schließlich die für das Beispiel benötigten Javascript-Dateien hinzu.

Beachten Sie, dass wir die Javascript-Dateien am Ende des Körpers hinzufügen. Dies dient dazu, die wahrgenommene Ladegeschwindigkeit Ihrer Seiten zu verbessern, da der Browser die Ausgabe anzeigen kann, ohne auf das Laden der Skripte warten zu müssen.

Fügen Sie index.html das folgende Markup hinzu:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery + jGFeed AJAX Feed Reader Example</title> <link rel="stylesheet" href="assets/styles.css" 
type="text/css" /> </head> <body> 
 
 <h1>jQuery + jGFeed AJAX Feed Reader Example</h1> 
 
 <ul class="menu"> <li> <a class="ajax-feed-trigger" href="http://www.lupomontero.com/feed"> .lupomontero </a> </li> <li> <a class="ajax-feed-trigger" 
href="http://feeds.feedburner.com/nettuts"> Nettuts+ </a> </li> <li> <a class="ajax-feed-trigger" href="http://feeds.feedburner.com/jquery"> jQuery </a> </li> <li> <a class="ajax-feed-trigger" 
href="http://feeds2.feedburner.com/LearningJquery"> Learning jQuery </a> </li> </ul> 
 
 <div id="ajax-feed-wrapper"> <div id="ajax-feed-container"> Click links above to fetch feeds </div> </div> 
 
 <!-- Load jQuery, jGFeed and feedreader scripts --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="assets/jquery.jgfeed-min.js"></script> <script type="text/javascript" src="assets/feedreader.js"></script> 
 
 </body> </html>

Wenn wir diese Datei jetzt im Webbrowser öffnen, sollte die folgende Seite mit den ersten Elementen für unseren Feedreader angezeigt werden.

Beachten Sie, dass dieses Markup für Browser ohne Javascript perfekt geeignet ist, da die Seite weiterhin gültige Links zu den Feeds bietet, der Browser jedoch offensichtlich an einen neuen Speicherort verschoben wird, anstatt die Feeds in unserem Reader anzuzeigen.

Vollbild

Schritt 3: Überschreiben Sie das Links Default Onclick Event

Wenn wir auf einen Link klicken, wird unser Browser bisher an einen neuen Ort geleitet, den im Attribut 'href' des Links angegebenen Ort. Dies ist das normale Verhalten von Links. In diesem Fall möchten wir jedoch verhindern, dass der Browser irgendwohin geht, und stattdessen die URL asynchron abrufen, die Antwort verarbeiten und die Daten innerhalb des vorhandenen Markups drucken, sodass wir die Site nicht verlassen müssen und die Newsfeeds werden so präsentiert, wie wir es wollen.

Öffnen Sie die leere Datei, die wir als Assets/feedreader.js gespeichert haben (hier schreiben wir unser Skript) und fügen Sie das folgende Javascript hinzu:

 $(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault(); 
 
 // Store reference to container object in local var var container = $('#ajax-feed-container'); 
 
 // Empty container div and temporarily add "loading" style container.empty().addClass('loading'); 
 
 // Get links href attribute var href = $(this).attr('href'); alert(href); 
 
 // Get feed using jGFeed 
 
 }); // End a.ajax-feed-trigger click event });

Der obige Code überschreibt das Standardverhalten des Links onclick-Ereignisses mithilfe der Klickmethode von jQuery für alle 'a'-Tags der Klasse 'ajax-feed trigger'. Innerhalb der Klickmethode verhindern wir zunächst das Standardverhalten mithilfe von Javascript PreventDefault(). Dann leeren wir den Container div, fügen die Ladeklasse hinzu, mit der wir den Ladezustand formatieren können, und zeigen vorerst nur den Wert an des href-Attributs des angeklickten Links. Wir werden einen Aufruf von alert() verwenden, um zu überprüfen, ob unser Code bisher funktioniert.

Zurück im Browser sollten wir beim Klicken auf die Links einen Warndialog mit der URL des angeklickten Links sehen.

Schritt 4: Abrufen des Newsfeeds als JSON-Objekt mithilfe von jGFeed

Der nächste Schritt besteht darin, die eigentliche HTTP-Anfrage mit jGFeed zu senden und zu überprüfen, ob wir die erwartete Antwort erhalten haben.

Das jGFeed-Plugin akzeptiert die folgenden Argumente:

url - URL des Feeds, den Sie laden möchten
callback - Rückruffunktion zum Aufrufen nach dem Laden des RSS-Feeds
num (optional) - Anzahl der zu ladenden Blogeinträge (standardmäßig 3)
key (optional) - Google API-Schlüssel zum Laden von RSS-Feeds.

Weitere Infos zu jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

In diesem Beispiel übergeben wir den Wert des href-Attributs des Links als URL, eine anonyme Rückruffunkion, und geben an, dass die Ergebnisse auf 5 begrenzt werden sollen.

Fügen Sie in assets/feedreader.js den Aufruf von jGFeed hinzu, sodass das Skript nun wie folgt aussehen sollte:

 $(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent 
default click action e.preventDefault(); 
 
 // Store reference to container object in local var var container = $('#ajax-feed-container'); 
 
 // Empty container div and temporarily add "loading" style container.empty().addClass('loading'); 
 
 // Get links href attribute var href = $(this).attr('href'); 
 
 // Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; } }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event });

Wir können jetzt Firebug verwenden, um zu sehen, was jGFeed tut. Klicken Sie auf einen der Links, öffnen Sie die Registerkarte "Net" in Firebug und suchen Sie die JSON-Anforderung. Es sollte so etwas wie "GET load?v1.0&callback=jsonp12" sagen. Wenn Sie die Ansicht erweitern, sollten Sie das JSON-Objekt und die darin enthaltenen Daten sehen können.

Schritt 5: Dynamisches Erstellen des Markups für jeden Feedeintrag

Jetzt, da wir wissen, dass wir die Daten erhalten, können wir fortfahren, etwas damit zu tun. In diesem Fall möchten wir die Einträge im Feed durchlaufen und eine Zeichenfolge mit HTML-Markup an den vorhandenen Container anhängen, den wir in unserer Datei index.html erstellt haben.

Bevor wir jedoch die Einträge durchlaufen, müssen wir den Container vorbereiten. Wir verstecken das div, um sicherzustellen, dass wir nichts sehen, bis wir den Inhalt des Container-Tags bearbeitet haben. Wir entfernen auch die Ladeklasse, da das Div jetzt ausgeblendet ist, und fügen den Feed-Titel in ein Überschriften-Tag ein.

Wir verwenden eine for-Schleife, um die Eintragseigenschaft des Feed-Objekts zu durchlaufen, das von jGFeed an unsere Rückruffunktion zurückgegeben wird. Innerhalb der Schleife erstellen wir einfach eine Zeichenfolge mit einem HTML-Markup, um die Eigenschaften jedes Eintrags anzuzeigen. Am Ende jeder Iteration hängen wir diese HTML-Zeichenfolge an den Feed-Container an.

Sobald wir das Container-Div mit allen Einträgen gefüllt haben, rufen wir die show() -Methode von JQuery auf, um das div einzufügen und es schließlich wieder sichtbar zu machen.

 $(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault(); 
 
 // Store reference to container object in local var var container = $('#ajax-feed-container'); 
 
 // Empty container div and temporarily add "loading" style container.empty().addClass('loading'); 
 
 // Get links href attribute var href = $(this).attr('href'); 
 
 // Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; } 
 
 container.hide(); container.removeClass('loading'); container.append('<h2>' + feeds.title + '</h2>'); 
 
 // Process feed entries for (var i=0; i<feeds.entries.length; i++) { var entry = feeds.entries[i]; 
 
 // Build HTML string for entry var html = '<div class="ajax-feed-item">'; html += '<hr /><h2><a href="' + entry.link + '">'; html += entry.title + '</a></h2>'; html += '<div 
class="ajax-feed-date">'; html += entry.publishedDate + '</div>'; html += '<div class="ajax-feed-author"> Posted by '; html += entry.author + '</div>'; html += '<div 
class="ajax-feed-content-snippet">'; html += entry.contentSnippet + '</div>'; html += '</div>'; 
 
 container.append(html); } 
 
 container.show('slow'); }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event });

Wenn Sie jetzt auf einen der Links klicken, sollten Sie die Newsfeeds sehen, wie im folgenden Screenshot gezeigt.

Schritt 6: Hinzufügen eines Links "Lesen Sie mehr", um den vollständigen Inhalt der Feed-Einträge anzuzeigen

Ok, das Beispiel scheint ziemlich gut zu funktionieren, aber wir können noch viel optimieren. In diesem Fall fügen wir einen Link vom Typ "Lesen Sie mehr" hinzu, der den vollständigen Inhalt des Eintrags anzeigt. Bisher haben wir nur die Eigenschaft contentSnippet in jedem Eintragsobjekt verwendet. Dies ist nützlich, da wir die Einträge in einer kompakten Liste anzeigen möchten, aber wir haben auch den vollständigen Inhalt in einer anderen Eigenschaft namens "content". Daher werden wir einen Link zum Lesen von mehr (+/-) hinzufügen, der zwischen den Links umschaltet Snippet und den vollständigen Inhalt, damit wir den gesamten Feed-Eintrag lesen können, ohne unsere Seite zu verlassen.

Dazu müssen wir zuerst den Inhalt zu der HTML-Zeichenfolge hinzufügen, die wir in der Schleife erstellt haben, aber wir werden die Höhe der Inhaltsdivs auf Null und ihren Überlauf auf "hidden" setzen, um sie während des Versteckens auszublenden werden sie nur verwenden, um die tatsächlichen Daten zu speichern. Unser Link tauscht einfach den Inhalt des 'visible' Snippet-Div gegen den 'invisible' Content-Div aus.

Kurz bevor wir den Feed am Ende der Rückruffunktion anzeigen, die wir an jGFeed übergeben haben, müssen wir auch den onclick-Ereignishandler für unsere Links zum Lesen hinzufügen. Wir machen das genauso wie mit den Links, die wir zum Abrufen des Feeds verwenden, mit der click() -Methode von jQuery.

 $(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault(); 
 
 // Store reference to container object in local var var container = $('#ajax-feed-container'); 
 
 // Empty container div and temporarily add "loading" style container.empty().addClass('loading'); 
 
 // Get links href attribute var href = $(this).attr('href'); 
 
 // Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; } 
 
 container.hide(); container.removeClass('loading'); container.append('<h2>' + feeds.title + '</h2>'); 
 
 // Process feed entries for (var i=0; i<feeds.entries.length; i++) { var entry = feeds.entries[i]; 
 
 // Build HTML string for entry var html = '<div class="ajax-feed-item">'; html += '<hr /><h2><a href="' + entry.link + '">'; html += entry.title + '</a></h2>'; html += '<div class="ajax-feed-date">'; html += entry.publishedDate + '</div>'; html += '<div class="ajax-feed-author"> Posted by '; html += entry.author + '</div>'; html += '<div class="ajax-feed-content-snippet">'; html += entry.contentSnippet + '</div>'; html += '<div id="ajax-feed-content-'+i; html += '" class="ajax-feed-content" '; html += 'style="height:0px; overflow:hidden;">'; html += entry.content + '</div>'; html += '<div><a class="ajax-feed-readmore" '; html += 'href="' + i + '">+</a></div>'; html += '</div>'; 
 
 container.append(html); } 
 
 // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-readmore').click(function(e) { // Prevent default click action e.preventDefault(); 
 
 var content_id = $(this).attr('href'); var div_id = 'ajax-feed-content-' + content_id; var content_div = $('#' + div_id); var content_txt = content_div.html(); var snippet_div = 
content_div.prev(); var snippet_txt = snippet_div.html(); 
 
 // Swap text content between divs content_div.html(snippet_txt); snippet_div.html(content_txt); 
 
 if ($(this).html() === '-') { $(this).html('+'); } else { $(this).html('-'); } }); 
 
 container.show('slow'); }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event });

Der Leser sollte nun die Schaltflächen '+' und '-' anzeigen, mit denen für jeden Eintrag zwischen dem Inhaltsausschnitt und dem vollständigen Inhalt umgeschaltet werden kann.

Schritt 7: Styling des Readers

Der Feedreader funktioniert jetzt... Hurra! Aber seien wir ehrlich, es sieht nicht sehr gut aus. Also lasst uns das Sahnehäubchen auf den Kuchen legen. Im Folgenden habe ich einige Stile als Beispiel dafür aufgeführt, wie der Leser gehäutet werden kann. Möglicherweise haben Sie bemerkt, dass wir Klassen für jedes der Elemente in unserem Markup verwendet haben. Daher sollte es relativ einfach sein, auf jedes Element in CSS-Selektoren auf dieselbe Weise zu verweisen, wie wir sie mit jQuery ausgewählt haben.

 /* Colours: red: #C74C44 dark red: #8C413A grey: #3F474C dark beige: #B5B095 beige: #DBD5B6 */ 
 
 html { color: #F0F0F0; background-color: #8C413A; font-family: "Helvetica", sans-serif; } 
 
 body { font-size: 12px; margin: 10px 20% 30px 20%; } 
 
 div, ul, li { margin: 0; padding: 0; } 
 
 img { border: 0; } 
 
 li { list-style: none; } 
 
 h1, h2, h3 { font-size: 100%; font-weight: normal; } 
 
 h1 { color: #DBD5B6; font-size: 4.6em; line-height: 1.1em; text-shadow: 1px 1px 0.3em #3F474C; background-image: url(logo.png); background-repeat: no-repeat; padding: 16px 0 0 148px; margin: 0px; height: 114px; } 
 
 h2 { color: #DBD5B6; font-size: 2.6em; text-shadow: 1px 1px #3F474C; padding: 0; margin: 0 0 25px 0; } 
 
 a { color: #DBD5B6; text-decoration: none; } 
 
 ul.menu { margin: 44px 0px 24px 0px; padding: 0px; } ul.menu li { display: inline; margin: 0px 5px 0px 0px; padding: 12px; background-color: #3F474C; border: 1px solid #B5B095; 
-moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 1.2em; text-shadow: 1px 1px #3F474C; } ul.menu li:hover { background-color: #B5B095; text-shadow: 1px 1px 0.2em #3F474C; } 
 
 div#ajax-feed-wrapper { padding: 20px; overflow: hidden; background-color: #C74C44; border: 1px solid #B5B095; -moz-border-radius: 5px; -webkit-border-radius: 5px; } 
 
 .loading { width: 36px; height: 36px; background-image: url(ajax-loader.gif); background-repeat: no-repeat; background-position: 20px 20px; } 
 
 div.ajax-feed-item { background-color: #8C413A; padding: 10px; margin-bottom: 10px; } 
 
 div.ajax-feed-item h3 { font-size: 1.8em; text-shadow: 1px 1px 0.3em #3F474C; padding: 0; margin: 3px 0 15px 0; } 
 
 div.ajax-feed-date, div.ajax-feed-author { font-size: 0.8em; } 
 
 div.ajax-feed-content-snippet { margin: 3px 0px 10px 0px; padding: 15px 5px 5px 5px; border-top: 1px solid #C74C44; text-shadow: 1px 1px #3F474C; } 
 
 a.ajax-feed-readmore { display: table-cell; padding: 1px 5px; border: 1px solid #DBD5B6; } 
 
 a.ajax-feed-readmore:hover { background-color: #B5B095; }

Voila! Das sieht schon viel besser aus ;-)