HTML Inhalt dynamisch laden

Question

Wie kann ich HTML Inhalte dynamisch anzeigen ohne die ganze Seite neu laden zu müssen? Z.B bei einer Kommentarfunktion wie auf Instagram. Wenn jemand einen Kommentar schreibt wird der ja angezeigt ohne das ich refresh klicken muss. Kann ich das mit Javascript oder Ajax?

Answer 1

Ja, du kannst HTML dynamisch aktualisieren, ohne die ganze Seite neu laden zu müssen, indem du AJAX (Asynchronous JavaScript and XML) verwendest. AJAX ermöglicht es, Daten asynchron zwischen dem Browser und dem Server auszutauschen, ohne die Seite komplett neu laden zu müssen. Du brauchst einen Container, in dem die Kommentare angezeigt werden.

<div id="comments-container">
    <!-- Hier werden die Kommentare angezeigt -->
</div>

Mit Javascript schreibst du eine Funktion welche die Kommentare abruft und dynamisch in das Div einfügt. In diesem Beispiel wird die Datei comments.php aufgerufen welche den Inhalt der Kommentare in HTML ausgibt.

function loadComments() {

    var commentsContainer = document.getElementById('comments-container');

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'comments.php', true);  
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

            commentsContainer.innerHTML = xhr.responseText;

        }
    };
    
    xhr.send();
}

Die Datei comments.php könnte so ähnlich aussehen.

// comments.php
$comments = array(
    "Benutzer1" => "Tolles Bild!",
    "Benutzer2" => "Schöne Aufnahme!"
    // ... Weitere Kommentare hier
);

foreach ($comments as $user => $comment) {
    echo "<div><strong>$user:</strong> $comment</div>";
}

Dann fügst du noch einen Aufruf von loadComments ein oder rufst es in regelmäßigen Abständen auf.

// Lade Kommentare beim Seitenstart
loadComments();

// Optional: Aktualisiere Kommentare in bestimmten Intervallen
setInterval(function() {
    loadComments();
}, 5000); // Zum Beispiel alle 5 Sekunden aktualisieren