Foros del Web - Ver Mensaje Individual - ¿Como crear una barra progresiva mientras dura una consulta a la base de datos?

Naahuel · #2 (**permalink**) 19/09/2012, 06:18

No estoy seguro si esto puede lograrse del lado del servidor solamente. Con AJAX, sí es más fácil y se hace todo el tiempo.

Sin embargo, no es tan fácil usar una barra de progreso pues esto requeriría saber de antemano el tiempo que durará la consulta. Entonces se usan los gifs giratorios o con barras que van y vuelven ( http://www.ajaxload.info/ ).

Otra opción (menos efectiva, más trabajosa) sería crear un script que haga muuuchas consultas y registre los tiempos de respuesta. Tomás el peor caso y estimas que eso es lo más que puede demorar y tomas ese tiempo para hacer tu barra de progreso. Si la consulta termina antes, hacés saltar la barra al 100% y listo. De nuevo, esto es más trabajoso y menos efectivo. Además, va a dar la impresión de que el sitio es más lento.

Te dejo un ejemplo MUY básico, usando un poquito de jQuery (que facilita las consultas AJAX y la creación y manipulación de elementos del DOM)

index.php

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //crear gif y ocultarlo
        $loading = $('<img src="loading.gif" id="loading" />').hide();
        //agregarlo al body
        $('body').append($loading);
        
        $('#consultar').click(function(e){
            e.preventDefault();
            $_elem = $(this);
            
            //hacer la consulta
            $loading.show() //mostramos el gif
            $.ajax({
                url: 'consultame.php'
            }).done(function(resultado){
                //ocultamos el gif
                $loading.hide();
                
                //agregar el resultado, luego del link
                $_elem.after(resultado);
            });
        });
        
    });
</script>
<style type="text/css">
    <!--
    #loading{
        position: fixed;
        left: 50%;
        top: 50%;
    }
    -->
</style>
 
<title>Ejemplo de ajax</title>
</head>
<body>
    <a href="#" id="consultar">Consultar</a>
</body>
</html>

consultame.php

Código PHP:

Ver original<?php 
    //emulamos una consulta a la base de datos
    sleep(1);
    echo '<p>Resultado!</p>';
?>

Ver funcionando: http://nahueljose.com.ar/ejemplos/ajax-test/01/