Anzeigen eines Fortschrittsbalkens beim Laden von Daten mit AJAX

Beim Durchführen einer AJAX-Abfrage, die Daten aus einer Datenbank abruft, kann dies einige Zeit dauern damit die Ergebnisse zurückgegeben werden. Um dem Benutzer während dieses Ladevorgangs Feedback zu geben, kann ein Fortschrittsbalken angezeigt werden.

Erstellen eines Fortschrittsbalkens mit jQuery

Die jQuery-Bibliothek bietet integrierte Methoden die die Erstellung und Bearbeitung von Fortschrittsbalken erleichtern. Um Ihrem AJAX-Aufruf einen Fortschrittsbalken hinzuzufügen, können Sie einen Ereignis-Listener an das xhr-Objekt anhängen:

$.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 the progress bar here
            }
        }, false);

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

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

In diesem Code:

• Der Fortschrittsereignis-Listener für die Upload-Eigenschaft verfolgt den Fortschritt des Sendens von Daten an den Server.
• Der Fortschrittsereignis-Listener für das xhr-Objekt verfolgt den Fortschritt des Datenempfangs vom Server.
• Sie können die Variable „percentComplete“ verwenden, um den Abschlussprozentsatz zu bestimmen und den Fortschrittsbalken zu aktualisieren entsprechend.
• Nachdem die Daten erfolgreich abgerufen und verarbeitet wurden, kann der Fortschrittsbalken ausgeblendet und die Ergebnisse angezeigt werden.

Durch die Implementierung dieses Ansatzes können Sie Ihr AJAX verbessern Rückrufe mit einem benutzerfreundlichen Fortschrittsbalken, der während des Datenladevorgangs visuelles Feedback bietet.