Das typische Verfahren zum Erstellen einer dynamischen Feed-Liste erfordert eine bestimmte Backendsprache. Natürlich kann dies gut funktionieren, wenn Sie mit Rails oder PHP vertraut sind, aber ich möchte eine Methode zum Abrufen von RSS-Feeds über jQuery vorstellen. Das Problem besteht darin, auf Ajax-Anforderungen von einem externen Server aus zuzugreifen und diese XML-Informationen dann in etwas lesbarer zu konvertieren.
Wir werden uns auf die Google Feed API konzentrieren, die viel einfacher ist, als es aussieht. Es gibt eine Reihe von benutzerdefinierten Möglichkeiten, um mit den Optionen zu spielen und auf andere alternative Themen zuzugreifen. Wir müssen nur die erste Seite der Feedelementergebnisse zusammen mit jedem Titel und dem URL-Link ziehen. Wenn Sie dieses Skript ausgeführt haben, können Sie das Layout sehr einfach anpassen und sogar etwas Inhalt aus dem Feed hinzufügen. Sehen Sie sich unten meine Beispiel-Demo an, um eine Vorstellung davon zu bekommen, was wir erstellen werden.
Live Demo - Quellcode herunterladen
Fertig machen
Im ersten Schritt erstellen Sie ein Basisdokument, das die jQuery-Bibliothek als Ressource enthält. Ich werde ein paar Funktionen verwenden, die bei Stack Overflow veröffentlicht wurden und die uns helfen, diesen RSS-Feed zu erreichen. Normalerweise müssen Sie beim Schreiben einer Webanwendung über eine Backendsprache auf das domänenübergreifende Parsing zugreifen. PHP ist oft die einfachste Lösung für Webentwickler.
Da wir die Google Feed-API verwenden, wird sie als Backend-Skript verwendet. Somit kann alles über jQuery Ajax gelesen und dann in JSON konvertiert werden, damit wir besser analysieren können. Hier ist mein Dokumentheader, der jQuery zusammen mit einem benutzerdefinierten Skript enthält parser.js.
Das Beste an meinem Code ist, wie wir alles über JavaScript ausfüllen können. Alle internen RSS-Elemente auf der Seite werden in HTML geschrieben, jedoch nicht in der Dokumentquelle angezeigt. Der gesamte Inhalt wird dynamisch veröffentlicht. Sie können die Feedquellen schnell bearbeiten, um sie bei jedem Neuladen der Seite zu ändern.
Dies ist die Gesamtheit des Inhalts des Körpers. Jede Klasse von .Futtercontainer wird verwendet, um dieselben Grundstile auf Überschriften und Links anzuwenden. Die ID-Namen werden über jQuery angesteuert, sodass wir unsere benutzerdefinierte RSS-Funktion ausführen und dann mit der .html () -Methode neuen Inhalt anhängen können.
RSS-Analyse in jQuery
Wir können die meisten CSS-Stile überspringen, da sie recht einfach sind. Werfen Sie einen Blick auf mein Stylesheet, wenn Sie sehen möchten, wie die Ausrichtung durchgeführt wird. Aber umziehen in parser.js Es gibt zwei Funktionen, bei denen die RSS / JSON-Konvertierung speziell behandelt wird. Die andere ist eine Kapitalisierungsfunktion, die automatisch den RSS-Feed? Title? Attribut bleiben groß geschrieben.
Diese parseRSS () function wurde in einer verwandten Stack Overflow-Frage veröffentlicht und beschreibt eine perfekte Lösung, die nur mit jQuery ausgeführt wird. Wir benötigen immer noch einen Server, da die .ajax () -Methode nicht ohne einen HTTP-Stream ausgeführt werden kann. Sie benötigen jedoch keine Unterstützung für andere Backendsprachen. Dies ist eine große Erleichterung. Im Idealfall können wir darauf vertrauen, dass Google dies unbegrenzt weiterlaufen lässt, da dies eine enorme Ressource für Entwickler ist.
Der Funktionscode selbst ist leicht zu verstehen, wenn Sie mit .ajax () vertraut sind. Zuerst geben wir die URL an die Abfrage weiter. Dies ist der Remote-Link für die Google Feed-API. Wir brauchen die Datentyp Als JSON festgelegt und nach dem erfolgreichen Aufruf von ajax sollten wir eine neue Funktion ausführen, um den HTML-Inhalt anzuzeigen. Beachten Sie, dass der Parameter, den wir übergeben, aufgerufen wird Daten das hält die JSON-Antwort.
Die Antwortschleife
Beachten Sie, dass ich auch einen Kommentar mit dem Code hinterlassen habe console.log (data.responseData.feed) wenn Sie die Ausgabe aller JSON-Inhalte anzeigen möchten. Es ist möglich, mehr als nur den Feedtitel und die URL-Links anzuzeigen. Aber ich wollte dieses Beispiel von unnötigen Schnickschnack trimmen. Sie haben die Möglichkeit, innerhalb dieser Funktion nach Belieben weitere Elemente hinzuzufügen.
In der erfolgreichen ajax-Aufruffunktion habe ich eine .each () -Schleife eingebettet, um die Elemente innerhalb des Feeds zu durchlaufen. Beachten Sie, dass auf dieses Array über zugegriffen werden kann data.responseData.feed.entries was wir in ein Schlüssel-Wert-Paar verwandeln. Es ist ziemlich einfach, weil wir nur eine String-Variable benötigen, um den HTML-Code aufzunehmen. Dann wird mit jQuery .append () der gesamte Inhalt wieder der Seite hinzugefügt.
Die Titelausgabe befindet sich nicht in dieser .each () -Schleife, da sie für jeden Feed nur einmal hinzugefügt werden sollte. Es wird jedoch auch eine andere benutzerdefinierte Funktion verwendet, die geschrieben wird, um jeden ersten Buchstaben innerhalb einer JavaScript-Zeichenfolge groß zu schreiben. Einige der RSS-Feeds enthalten alle Titelbuchstaben in Kleinbuchstaben, die seltsam aussehen können. Hier ist der Funktionscode und er ist sehr kurz.
Beachten Sie, dass RSS-Feeds sehr viel mehr Informationen zum Veröffentlichen enthalten können. Manchmal finden Sie sogar Miniaturbilder, die in die XML-Feeds eingebettet sind. Dadurch können Artikelbilder in Ihre eigene RSS-Webapp eingefügt werden! Die Möglichkeiten sind praktisch unbegrenzt und der einfache Zugriff auf die Feed-APIs von Google.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
RSS-Feeds sind bei Webentwicklern nach wie vor sehr beliebt, da dies eine übliche Methode zum Übertragen von Daten zwischen Websites ist.Auf diese Weise können Internet-Vermarkter Aktualisierungen auf Twitter oder Facebook direkt aus dem RSS-Feed der Website heraus veröffentlichen. Ich würde empfehlen müssen, eine Kopie meines Quellcodes herunterzuladen und zu Ihrer Zeit herumzuspielen. Prüfen Sie außerdem, ob Sie Ihre eigenen Funktionen hinzufügen oder eine nützliche Web-App erstellen können, die sich auf beliebte RSS-Feeds bezieht.