AJAX XML

Dieses Kapitel zeigt, wie man XML-Daten aus einem PHP-Skript mit AJAX lädt und sie ohne vollständiges Neuladen der Seite anzeigt. Du baust einen kleinen PHP-Endpunkt, der XML ausgibt, rufst ihn im Browser mit XMLHttpRequest ab, analysierst die Antwort mit dem DOM und fügst das Ergebnis in die Seite ein.

Wenn du mit dem übergeordneten Thema noch nicht vertraut bist, lies zuerst die Kapitel AJAX-Einführung und AJAX mit PHP.

Was ist AJAX?

AJAX (Asynchronous JavaScript and XML) ist eine Technik, mit der der Browser im Hintergrund Daten mit dem Server austauschen und nur einen Teil der Seite aktualisieren kann, anstatt das gesamte Dokument neu zu laden. Der Browser sendet eine HTTP-Anfrage aus JavaScript heraus, empfängt eine Antwort und nutzt diese, um den DOM zu verändern. Das reduziert die wahrgenommene Latenz und die Serverlast.

Was ist XML?

XML (Extensible Markup Language) ist ein Textformat zum Speichern und Übertragen strukturierter Daten mithilfe verschachtelter Tags. Es ist menschenlesbar und selbstbeschreibend, was es zu einem praktischen Übertragungsformat zwischen einem PHP-Server und dem Browser macht. Wenn ein Server XML mit dem Header Content-Type: text/xml sendet, analysiert der Browser es automatisch und stellt es über die Eigenschaft responseXML der Anfrage als DOM-Baum bereit.

Warum PHP, AJAX und XML zusammen verwenden?

In diesem Muster fragt PHP eine Datenquelle (eine Datenbank oder Datei) ab und gibt ein XML-Dokument aus, der Browser ruft dieses Dokument mit AJAX ab, und JavaScript wandelt die XML-Knoten in HTML um. Das Ergebnis ist eine Seite, die einen Inhaltsbereich auf Anfrage aktualisiert. Obwohl XML funktioniert, senden moderne Anwendungen inzwischen meist JSON statt XML, weil JavaScript es nativ parsen kann – siehe den Hinweis im Fazit.

So verwendest du PHP, AJAX und XML zusammen

Um PHP, AJAX und XML gemeinsam zu nutzen, sind die folgenden Schritte erforderlich:

1. Erstelle ein PHP-Skript, das Daten aus einer Datenbank oder Datei abruft.
2. Verwende AJAX, um das PHP-Skript aufzurufen und die Daten abzurufen.
3. Analysiere die XML-Antwort in JavaScript, wandle sie in HTML-Elemente um und zeige sie auf der Webseite an.

Schritt 1: PHP-Skript erstellen

Der erste Schritt besteht darin, ein PHP-Skript zu erstellen, das Daten aus einer Datenbank oder Datei abruft. Dieses Skript ist dafür verantwortlich, die Daten zu laden, die auf der Webseite angezeigt werden sollen.

Hier ist ein Beispiel für ein PHP-Skript, das Daten aus einer Datenbank abruft:

Beispiel eines PHP-Skripts, das Daten aus einer Datenbank abruft

<?php
// Connect to database
$con = mysqli_connect("localhost","username","password","database");

if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

// Retrieve data from database
// Note: Ensure the database contains a table named 'table' with columns: title, description, price
// Note: In production, use prepared statements to prevent SQL injection
$result = mysqli_query($con,"SELECT * FROM table");

// Set content type to XML
header('Content-Type: text/xml');
echo '<?xml version="1.0"?>';
echo '<items>';

// Loop through the results and add them to XML
while($row = mysqli_fetch_array($result)) {
    echo '<item>';
    echo '<title>' . htmlspecialchars($row['title']) . '</title>';
    echo '<description>' . htmlspecialchars($row['description']) . '</description>';
    echo '<price>' . htmlspecialchars($row['price']) . '</price>';
    echo '</item>';
}

echo '</items>';
?>

Hinweis: Ersetze in der Produktion hartcodierte Zugangsdaten durch Umgebungsvariablen und füge eine Fehlerbehandlung für Datenbankverbindungen hinzu.

Schritt 2: AJAX verwenden, um das PHP-Skript aufzurufen

Der nächste Schritt besteht darin, AJAX zu verwenden, um das PHP-Skript aufzurufen und die Daten abzurufen. Stelle zunächst sicher, dass deine HTML-Seite ein Container-Element enthält, in das die abgerufenen Daten eingefügt werden:

<div id="data-container"></div>

Hier ist ein Beispiel für ein AJAX-Skript, das das in Schritt 1 erstellte PHP-Skript aufruft:

Beispiel für die Verwendung von AJAX zum Aufrufen eines PHP-Skripts und Abrufen der Daten

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.status == 200) {
            var xmlDoc = this.responseXML;
            var items = xmlDoc.getElementsByTagName("item");
            var container = document.getElementById("data-container");
            container.innerHTML = ""; // Clear previous data

            for (var i = 0; i < items.length; i++) {
                var title = items[i].getElementsByTagName("title")[0].textContent;
                var desc = items[i].getElementsByTagName("description")[0].textContent;
                var price = items[i].getElementsByTagName("price")[0].textContent;

                var div = document.createElement("div");
                div.className = "item";
                div.innerHTML = "<h3>" + title + "</h3><p>" + desc + "</p><span>" + price + "</span>";
                container.appendChild(div);
            }
        } else {
            console.error("Request failed with status: " + this.status);
            var container = document.getElementById("data-container");
            container.innerHTML = "<p>Error loading data.</p>";
        }
    }
};
xmlhttp.open("GET", "getdata.php", true);
xmlhttp.send();

Hinweis: Stelle sicher, dass das PHP-Skript vor der XML-Deklaration keine Leerzeichen oder BOM ausgibt, da dies dazu führt, dass this.responseXML den Wert null zurückgibt. Falls nötig, füge ob_clean(); am Anfang der PHP-Datei ein. Wenn dein PHP-Skript auf einer anderen Domain gehostet wird, stelle sicher, dass der Server entsprechende CORS-Header sendet (z. B. Access-Control-Allow-Origin: *).

Schritt 3: Daten formatieren und auf der Webseite anzeigen

Der Browser stellt die XML-Antwort über this.responseXML als DOM-Baum bereit, sodass der JavaScript-Code in Schritt 2 das Parsen bereits übernimmt: getElementsByTagName("item") gibt die <item>-Knoten zurück, und textContent liest den Wert jedes untergeordneten Elements. Für eine typische Serverantwort sieht das von dem PHP-Skript in Schritt 1 erzeugte XML so aus:

Beispiel für die Formatierung und Anzeige von XML-Daten

<items>
    <item>
        <title>Item 1</title>
        <description>This is the description of item 1.</description>
        <price>$10.00</price>
    </item>
    <item>
        <title>Item 2</title>
        <description>This is the description of item 2.</description>
        <price>$20.00</price>
    </item>
    <item>
        <title>Item 3</title>
        <description>This is the description of item 3.</description>
        <price>$30.00</price>
    </item>
</items>

Nach dem Parsen erstellt JavaScript Standard-HTML-Elemente (wie <div>, <h3> und <span>), die dann mit CSS gestaltet werden können. Hier ist ein Beispiel für CSS, das zur generierten HTML-Struktur passt:

Beispiel-CSS zur Gestaltung der gerenderten Daten

.item {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}
.item h3 { margin: 0 0 5px; }
.item span { color: #2a9d8f; font-weight: bold; }

Fazit

Die gemeinsame Verwendung von PHP, AJAX und XML ermöglicht es Entwicklern, dynamische Webseiten zu erstellen, die bestimmte Inhalte ohne vollständiges Neuladen aktualisieren. Wenn du die obigen Schritte befolgst, kannst du dieses Muster implementieren, um die Benutzererfahrung zu verbessern und die Serverlast zu reduzieren.

Hinweis: Obwohl dieses Tutorial XML und XMLHttpRequest zu Lernzwecken verwendet, bevorzugen moderne Webanwendungen typischerweise JSON und die fetch-API für den AJAX-Datenaustausch, da JavaScript native Unterstützung bietet und die Syntax einfacher ist. Siehe json_encode(), um JSON aus PHP zu erzeugen.

Verwandte Kapitel

• AJAX-Einführung — die Grundlagen von XMLHttpRequest und dem Anfrage-Lebenszyklus.
• AJAX und PHP — PHP-Skripte aus dem Browser aufrufen.
• AJAX-Datenbank — Datenbankzeilen über AJAX abrufen.
• PHP SimpleXML — XML auf der Serverseite mit PHP parsen.

Übungen