PHP - AJAX RSS Feed Beispiel
Hallo, aufstrebende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von PHP, AJAX und RSS-Feeds. Machen Sie sich keine Sorgen, wenn diese Begriffe derzeit wie ein Alphabet-Soup klingen – bis zum Ende dieses Tutorials werden Sie sie wie ein Profi jonglieren können! Lassen Sie uns eintauchen!
Really Simple Syndication (RSS)
Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was RSS eigentlich ist.
RSS steht für Really Simple Syndication. Es ist wie ein Nachrichten-Lieferservice für das Internet. Stellen Sie sich vor, Sie haben eine Lieblings-Nachrichtenwebsite, aber Sie möchten nicht jeden Tag darauf zugreifen, um nach neuen Artikeln zu schauen. Genau hier kommt RSS ins Spiel!
Ein RSS-Feed ist eine besondere Datei, die Websites verwenden, um ihre neuesten Inhalte in einem standardisierten Format zu veröffentlichen. Dieses Format ermöglicht anderen Programmen (genannt RSS-Reader) den einfachen Abruf und die Anzeige der neuesten Updates von mehreren Websites an einer Stelle.
Unser Projekt: Erstellung eines RSS-Feed Readers
Heute werden wir einen einfachen RSS-Feed-Reader mit PHP und AJAX erstellen. Unser Projekt wird aus zwei Hauptteilen bestehen:
- Eine HTML-Seite (index.html), die den Feed anzeigt und den AJAX-Code enthält.
- Ein PHP-Skript (rss.php), das den RSS-Feed abruft und verarbeitet.
Lassen Sie uns mit der HTML-Seite beginnen.
Index.html
Hier ist der Code für unsere index.html-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Feed Reader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getFeed").click(function(){
$.ajax({
url: "rss.php",
type: "GET",
dataType: "json",
success: function(data){
var html = "<ul>";
$.each(data, function(index, item){
html += "<li><a href='" + item.link + "'>" + item.title + "</a></li>";
});
html += "</ul>";
$("#feedContent").html(html);
},
error: function(){
$("#feedContent").html("Ein Fehler ist beim Abruf des Feeds aufgetreten.");
}
});
});
});
</script>
</head>
<body>
<h1>Mein RSS Feed Reader</h1>
<button id="getFeed">Neuesten Feed Abrufen</button>
<div id="feedContent"></div>
</body>
</html>Lassen Sie uns das einmal durchgehen:
- Wir beginnen mit einer grundlegenden HTML-Struktur.
- Im
<head>-Bereich includieren wir jQuery, das unsere AJAX-Aufrufe erleichtert. - Wir haben ein Skript, das ausgeführt wird, wenn das Dokument bereit ist. Es hängt ein Klickereignis an unseren "Neuesten Feed Abrufen"-Button.
- Wenn der Button geklickt wird, macht es eine AJAX-Anfrage an unser PHP-Skript (rss.php).
- Wenn der Aufruf erfolgreich ist, erstellt es eine unsortierte Liste von Links aus den Feed-Daten und zeigt sie im
feedContent-Div an. - Wenn es einen Fehler gibt, zeigt es eine Fehlermeldung an.
rss.php
Nun erstellen wir unser PHP-Skript, das den RSS-Feed abruft und verarbeitet:
<?php
// Cross-Origin-Anfragen erlauben
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// RSS-Feed-URL
$feedUrl = "http://rss.cnn.com/rss/edition.rss";
// Neues DOMDocument-Objekt erstellen
$xmlDoc = new DOMDocument();
// Den RSS-Feed laden
$xmlDoc->load($feedUrl);
// Alle <item>-Elemente abrufen
$items = $xmlDoc->getElementsByTagName('item');
$feed = array();
// Durchlaufen aller <item>-Elemente
foreach ($items as $item) {
$title = $item->getElementsByTagName('title')->item(0)->nodeValue;
$link = $item->getElementsByTagName('link')->item(0)->nodeValue;
// Dieses Element zu unserem Feed-Array hinzufügen
$feed[] = array(
'title' => $title,
'link' => $link
);
}
// Den Feed als JSON ausgeben
echo json_encode($feed);
?>Lassen Sie uns dieses PHP-Skript durchgehen:
- Wir beginnen mit dem Setzen von Headers, um Cross-Origin-Anfragen zu erlauben und anzugeben, dass wir JSON ausgeben.
- Wir definieren die URL des RSS-Feeds, den wir abrufen möchten (in diesem Fall die Top-Nachrichten von CNN).
- Wir erstellen ein neues DOMDocument-Objekt und verwenden es, um den RSS-Feed zu laden.
- Wir holen alle
<item>-Elemente aus dem Feed (jedes<item>repräsentiert eine einzelne Geschichte oder einen Artikel). - Wir durchlaufen jedes Element, extrahieren den Titel und den Link und fügen sie zu unserem
$feed-Array hinzu. - Schließlich kodieren wir unser
$feed-Array in JSON und geben es aus.
Wie alles zusammenarbeitet
Wenn Sie index.html in Ihrem Browser öffnen, sehen Sie einen "Neuesten Feed Abrufen"-Button. Wenn Sie diesen Button klicken:
- Das JavaScript in index.html macht eine AJAX-Anfrage an rss.php.
- rss.php ruft den RSS-Feed ab, verarbeitet ihn und gibt die Daten als JSON zurück.
- Das JavaScript empfängt diese JSON-Daten und verwendet sie, um eine Liste von Links auf der Seite zu erstellen.
Und voilà! Sie haben gerade einen einfachen RSS-Feed-Reader mit PHP und AJAX erstellt!
Verwendete Methoden
Hier ist eine Tabelle der Hauptmethoden, die wir in diesem Projekt verwendet haben:
| Methode | Beschreibung |
|---|---|
| $.ajax() | jQuery-Methode zum Ausführen einer AJAX-Anfrage |
| $.each() | jQuery-Methode zum Iterieren über ein Array oder Objekt |
| DOMDocument::load() | PHP-Methode zum Laden von XML aus einer Datei oder URL |
| getElementsByTagName() | PHP-Methode zum Abrufen von Elementen nach ihrem Tag-Namen |
| json_encode() | PHP-Funktion zum Kodieren eines Wertes in JSON-Format |
Erinnern Sie sich daran, dass Programmieren alles um Übung und Experimentieren geht. Haben Sie keine Angst, diesen Code zu ändern, verschiedene RSS-Feeds auszuprobieren oder neue Funktionen hinzuzufügen. Je mehr Sie herumspielen, desto besser werden Sie verstehen, wie alles zusammenpasst.
Happy Coding, zukünftige Tech-Zauberer!
Credits: Image by storyset