AJAX XML

Was ist PHP?

PHP ist eine serverseitige Skriptsprache, die zur Erstellung dynamischer Webseiten verwendet wird. Es ist eine Open-Source-Sprache, die in HTML-Code eingebettet werden kann. PHP ist beliebt, weil es einfach zu erlernen ist und Webentwicklern ermöglicht, interaktive und dynamische Webseiten schnell zu erstellen.

Was ist AJAX?

AJAX (Asynchronous JavaScript and XML) ist eine Technik, die es Webentwicklern ermöglicht, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden. Sie wird häufig in Webanwendungen eingesetzt, um die Benutzererfahrung zu verbessern und die Serverlast zu reduzieren.

Was ist XML?

XML (Extensible Markup Language) ist eine Auszeichnungssprache, die zum Speichern und Übertragen von Daten verwendet wird. XML wird häufig in Verbindung mit AJAX und PHP eingesetzt, um dynamische Inhalte zu erstellen. XML ist menschenlesbar, was es einfach macht, es zu verstehen und damit zu arbeiten.

Warum PHP, AJAX und XML zusammen verwenden?

Die Kombination von PHP, AJAX und XML ermöglicht es Entwicklern, reaktionsfähige Webanwendungen zu erstellen, die bestimmte Inhalte dynamisch aktualisieren. Dieser Ansatz verbessert die Benutzererfahrung, indem er vollständige Seitenneuladungen eliminiert und gleichzeitig die Serverlast reduziert.

So verwenden Sie PHP, AJAX und XML zusammen

Um PHP, AJAX und XML zusammen zu verwenden, müssen Sie die folgenden Schritte befolgen:

1. Erstellen Sie ein PHP-Skript, das Daten aus einer Datenbank oder einer Datei abruft.
2. Verwenden Sie AJAX, um das PHP-Skript aufzurufen und die Daten abzurufen.
3. Analysieren Sie die XML-Antwort in JavaScript, konvertieren Sie sie in HTML-Elemente und zeigen Sie sie auf der Webseite an.

Schritt 1: Erstellen Sie ein PHP-Skript

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

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

Beispiel für ein PHP-Skript, 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: Ersetzen Sie in der Produktion hartkodierte Anmeldeinformationen durch Umgebungsvariablen und fügen Sie eine Fehlerbehandlung für Datenbankverbindungen hinzu.

Schritt 2: Verwenden Sie AJAX, um das PHP-Skript aufzurufen

Der nächste Schritt besteht darin, AJAX zu verwenden, um das PHP-Skript aufzurufen und die Daten abzurufen. Stellen Sie zunächst sicher, dass Ihre 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: Stellen Sie sicher, dass das PHP-Skript vor der XML-Deklaration keine Leerzeichen oder ein BOM ausgibt, da dies dazu führt, dass this.responseXML null zurückgibt. Fügen Sie bei Bedarf ob_clean(); am Anfang der PHP-Datei ein. Wenn Ihr PHP-Skript auf einer anderen Domain gehostet wird, stellen Sie sicher, dass der Server die entsprechenden CORS-Header sendet (z. B. Access-Control-Allow-Origin: *).

Schritt 3: Formatieren Sie die Daten und zeigen Sie sie auf der Webseite an

Sobald die Daten abgerufen wurden, müssen wir die XML-Antwort analysieren und in HTML-Elemente konvertieren, die der Browser rendern kann. In diesem Schritt verwenden wir JavaScript, um die XML-Struktur zu lesen und in die Seite einzufügen. Das XML-Format selbst sieht wie folgt aus:

Beispiel zur 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 Analysieren erstellt JavaScript Standard-HTML-Elemente (wie <div>, <h3> und <span>), die anschließend mit CSS formatiert werden können. Hier ist ein Beispiel für CSS, das zur generierten HTML-Struktur passt:

Beispiel-CSS zur Formatierung 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 Verwendung von PHP, AJAX und XML zusammen ermöglicht es Entwicklern, dynamische Webseiten zu erstellen, die bestimmte Inhalte ohne vollständige Neuladungen aktualisieren. Durch Befolgen der oben genannten Schritte können Sie dieses Muster implementieren, um die Benutzererfahrung zu verbessern und die Serverlast zu reduzieren.

Hinweis: Obwohl dieses Tutorial XML und XMLHttpRequest zu Bildungszwecken verwendet, bevorzugen moderne Webanwendungen aufgrund der nativen JavaScript-Unterstützung und der einfacheren Syntax in der Regel JSON und die fetch-API für den AJAX-Datenaustausch.

Wenn Sie Fragen haben oder weitere Unterstützung benötigen, können Sie sich gerne an uns wenden.

Practice

Wie ist der korrekte Weg, ein XMLHttpRequest-Objekt in PHP unter Verwendung von AJAX XML zurückzugeben?

Durch die Verwendung der Methode 'new XMLHttpRequest()'Durch die Verwendung der Methode 'createXMLHttpRequest()'Durch die Verwendung der Methode 'open()' mit 'GET' oder 'POST', der Server-URL-Adresse und abschließend dem Wert von async als true oder falseDurch die Verwendung der Methode 'send()'Durch die Verwendung der Eigenschaft 'responseXML'