So zeigen Sie einen Fortschrittsbalken während des Ladens von Ajax-Daten an

Bei der Verarbeitung von vom Benutzer ausgelösten Ereignissen wie der Auswahl von Werten aus einem Dropdown-Feld ist es üblich, Daten asynchron mit abzurufen Ajax. Während die Daten abgerufen werden, ist es hilfreich, dem Benutzer einen visuellen Hinweis darauf zu geben, dass etwas passiert. In diesem Artikel wird eine Methode zum Anzeigen eines Fortschrittsbalkens bei Ajax-Anfragen untersucht.

Implementieren eines Fortschrittsbalkens mit Ajax

Um einen Fortschrittsbalken zu erstellen, der den Fortschritt eines Ajax-Aufrufs genau verfolgt, befolgen Sie diese Schritte :

1. Formularänderungen abhören:

Verwenden Sie addEventListener('change'), um auf Änderungen am Dropdown-Feld zu warten.

2. Ajax-Anfrage initiieren:

Senden Sie eine Ajax-Anfrage, um die gewünschten Daten abzurufen.

3. Verwenden von XMLHttpRequest für Fortschrittsereignisse:

Konfigurieren Sie in den Ajax-Optionen die Funktion xhr, die Zugriff auf das XMLHttpRequest-Objekt bietet. Mit diesem Objekt können Sie verschiedene Ereignisse überwachen, einschließlich des Fortschritts.

4. Überwachen Sie den Upload- und Download-Fortschritt:

Fügen Sie innerhalb der Funktion xhr Ereignis-Listener hinzu, um sowohl den Upload- als auch den Download-Fortschritt zu verfolgen. Zu diesen Ereignissen gehören onloadstart, onprogress und onloadend.

5. Fortschrittsbalken aktualisieren:

Verwenden Sie das Ereignis progress, um den Prozentsatz des Fortschritts basierend auf den geladenen und Gesamteigenschaften des Ereignisobjekts zu berechnen und den Fortschrittsbalken entsprechend zu aktualisieren.

Hier ist ein Beispielcode-Snippet, das diese Schritte demonstriert:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

Durch die Integration dieser Techniken können Sie beim Laden von Ajax-Daten effektiv einen Fortschrittsbalken anzeigen und so ein reibungsloses und informatives Benutzererlebnis gewährleisten.