Polarlichter

Dynamisches Laden von Webinhalten mit Ajax und HTML5 History API

von Oliver | 05.12.23 |

In der Welt der Webentwicklung sind Schnelligkeit und Interaktivität Schlüsselelemente, um ein ansprechendes Benutzererlebnis zu bieten. Eine häufig eingesetzte Technik ist die Verwendung von Ajax-Anfragen (Asynchronous JavaScript and XML), die es ermöglichen, Webseiteninhalte dynamisch zu aktualisieren, ohne die ganze Seite neu laden zu müssen. Dieser Artikel befasst sich mit der Implementierung von Ajax-Anfragen in Kombination mit der HTML5 History API, um die URL in der Browseradresszeile anzupassen, während die Seite dynamisch aktualisiert wird. Diese Methode ist besonders nützlich für die Erstellung nahtloser und reaktiver Webanwendungen.

Dynamische Inhaltsaktualisierung mit Ajax

Ajax ist eine Schlüsseltechnologie, die es Webentwicklern ermöglicht, Teile einer Webseite zu aktualisieren, ohne eine vollständige Seitenaktualisierung durchführen zu müssen. Dies wird erreicht, indem asynchrone Anfragen an den Server gesendet werden, um neue Daten zu holen und nur den relevanten Teil der Seite zu aktualisieren. Ein Beispiel hierfür ist das Laden von Artikeln oder Bildern, wenn ein Benutzer auf einen Link oder Button klickt.

Integration der HTML5 History API

Die HTML5 History API bietet Funktionen, mit denen die Browserhistorie manipuliert werden kann. So kann zum Beispiel die URL in der Browseradresszeile geändert werden, ohne dass die Seite neu geladen wird. Dies ist besonders nützlich, um die Nutzererfahrung bei der Navigation in einer Single-Page-Application (SPA) oder bei der dynamischen Inhaltsaktualisierung zu verbessern. Durch die Kombination von Ajax-Anfragen und der History API können Entwickler Webanwendungen erstellen, die sowohl interaktiv als auch effizient im Hinblick auf die Seitennavigation sind.

Praktisches Beispiel

Im Rahmen unseres Beispiels wurde eine Webanwendung erstellt, bei der Benutzer auf Tags klicken können, um relevante Inhalte zu laden. Bei jedem Klick wird eine Ajax-Anfrage ausgelöst, die den Inhalt eines bestimmten Bereichs der Seite aktualisiert. Gleichzeitig wird die URL in der Adresszeile des Browsers über die History API angepasst, um die Navigation zu reflektieren, ohne die Seite neu zu laden. Dies bietet ein nahtloses Navigationsgefühl und hält die URL aktuell, was für das Bookmarking und Teilen von Links wichtig ist.

Fazit

Die Kombination von Ajax-Anfragen und der HTML5 History API in Webanwendungen ist ein mächtiges Werkzeug, um interaktive, reaktionsschnelle und benutzerfreundliche Webseiten zu erstellen. Durch das dynamische Laden von Inhalten und die Anpassung der Browseradresszeile können Entwickler ein nahtloses und effizientes Benutzererlebnis schaffen, das moderne Webstandards erfüllt.

Aufgabe

<div class="row">
        <div class="col-xl-10" id="reload">
            {{ include('dash/system/_tags.html.twig') }} 
        </div>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xl-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>

            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xl-12"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left: 0.8rem;"</span>&gt;</span>
                    {% if tags %}
                        <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted mt-4"</span>&gt;</span>Schlagwörter<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag-container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: flex; flex-wrap: wrap;"</span>&gt;</span>
                            {% for tag in tags %}
                                <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"{{ path('system.tag') }}/{{ tag.url }}"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-right: 10px;"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"klick_reload_{{ tag.id }}"</span>&gt;</span>
                                        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-{{ tag.color }}"</span>&gt;</span>{{ tag.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                                    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
                                <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
                            {% endfor %}
                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                    {% endif %}
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

Ziel

<script>
    $(document).ready(function(){
        $('a[id^="klickreload"]').on('click', function(e){
            e.preventDefault(); // Verhindert, dass der Link die Seite neu lädt

            var tagId = $(this).attr('id').split('_').pop(); // Extrahiert die tag.id
            var url = $(this).attr('href');
            var tagName = $(this).text().trim(); // Extrahiert den Tag-Namen

            // Ändern der Browser-URL ohne die Seite neu zu laden
            history.pushState({id: tagId}, tagName, url);

            $.ajax({
                type: "POST",
                url: url,
                data: { id: tagId, modus: 'refresh' },
                success: function(response) {
                    $('#reload').html(response); // Ersetzt den Inhalt von #reload
                }
            });
        });

        // Behandelt das Browser-Zurück-Event
        window.onpopstate = function(event) {
            if (event.state) {
                // Sie können hier Logik hinzufügen, um die Seite entsprechend zu aktualisieren,
                // z. B. durch erneutes Laden des Inhalts basierend auf event.state.id
            }
        };
    });
</script>