Mostrar una barra de progreso mientras se cargan datos con AJAX

Al realizar una consulta AJAX que recupera datos de una base de datos, puede llevar algún tiempo para que se devuelvan los resultados. Para proporcionar comentarios al usuario durante este proceso de carga, se puede mostrar una barra de progreso.

Creación de una barra de progreso con jQuery

La biblioteca jQuery ofrece métodos integrados que facilitan la creación y manipulación de barras de progreso. Para agregar una barra de progreso a su llamada AJAX, puede adjuntar un detector de eventos al objeto xhr:

$.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
    }
});

En este código:

• El detector de eventos de progreso para la propiedad de carga rastrea el progreso del envío de datos al servidor.
• El detector de eventos de progreso para el objeto xhr rastrea el progreso de la recepción de datos del servidor.
• Puede usar la variable percentComplete para determinar el porcentaje de finalización y actualizar la barra de progreso en consecuencia.
• Después del los datos se han recuperado y procesado exitosamente, la barra de progreso se puede ocultar y los resultados se pueden mostrar.

Al implementar este enfoque, puede mejorar sus devoluciones de llamadas AJAX con una barra de progreso fácil de usar, que proporciona retroalimentación visual durante las operaciones de carga de datos.