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.
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.
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