"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo mostrar una barra de progreso durante la carga de datos Ajax?

¿Cómo mostrar una barra de progreso durante la carga de datos Ajax?

Publicado el 2024-11-08
Navegar:735

How to Display a Progress Bar During Ajax Data Loading?

Cómo mostrar una barra de progreso durante la carga de datos Ajax

Al manejar eventos activados por el usuario, como seleccionar valores de un cuadro desplegable, es común recuperar datos de forma asincrónica usando Áyax. Mientras se obtienen los datos, es beneficioso proporcionar una indicación visual al usuario de que algo está sucediendo. Este artículo explora un método para mostrar una barra de progreso durante las solicitudes de Ajax.

Implementación de una barra de progreso con Ajax

Para crear una barra de progreso que rastree con precisión el progreso de una llamada de Ajax, siga estos pasos :

1. Escuche los cambios de formulario:

Utilice addEventListener('change') para escuchar los cambios en el cuadro desplegable.

2. Iniciar solicitud Ajax:

Envíe una solicitud Ajax para recuperar los datos deseados.

3. Uso de XMLHttpRequest para eventos de progreso:

En las opciones de Ajax, configure la función xhr, que proporciona acceso al objeto XMLHttpRequest. Este objeto le permite monitorear varios eventos, incluido el progreso.

4. Supervisar el progreso de carga y descarga:

Dentro de la función xhr, agregue detectores de eventos para realizar un seguimiento del progreso de carga y descarga. Estos eventos incluyen onloadstart, onprogress y onloadend.

5. Actualizar barra de progreso:

Utilice el evento progreso para calcular el porcentaje de progreso en función de las propiedades cargadas y totales del objeto de evento, y actualice la barra de progreso en consecuencia.

Aquí hay un fragmento de código de ejemplo que demuestra estos pasos:

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

Al incorporar estas técnicas, puede mostrar de manera efectiva una barra de progreso durante la carga de datos Ajax, lo que garantiza una experiencia de usuario fluida e informativa.

Declaración de liberación Este artículo se reimprime en: 1729695078 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3