Mostrar imagen de carga mientras se procesa la consulta AJAX

Mostrar imagen de carga loading

 

Mostrar una imagen de carga (loading) en consultas Ajax.

Cuando, debido a una consulta al servidor o procesamiento de datos, la web queda parada a la espera de una respuesta, debemos mostrar una imagen de carga o ‘loader’,ya sea un archivo CSS o una imagen que se muestra al usuario .

Si la solicitud AJAX tarda más tiempo, en el lado del cliente no se muestra ningún cambio visible y el usuario no sabe si su solicitud está en progreso o no o ha habido algún error , para eso añadimos una imagen de carga “loading”.

Puede mostrar una imagen de carga o un mensaje de texto en la página cuando la solicitud AJAX está en curso y ocultarla después de recibir una respuesta.

 

Partes de una consulta AJAX.

antes de enviar (beforeSend)

Esto se ejecutó antes de que se llame la solicitud AJAX.

Sintaxis

 

Solicitud completada (complete)

Esto se ejecutará cuando finalice la solicitud AJAX, ya sea que la devolución de llamada sea exitosa o no.

Sintaxis

 

Solicitud exitosa (success)

Se ejecutará cuando se reciba la respuesta.

Sintaxis

 

Error en la solicitud (error)

Esto se ejecutará si la solicitud AJAX genera un error .

Sintaxis

 

En esta entrada, un CRUD con Ajax para no recargar la página, puedes ver un efecto loading en funcionamiento, mostrando la imagen de carga con cada consulta a la base de datos.

 


 

Vamos con un ejemplo.

Escribiremos un script para enviar una solicitud AJAX cuando haga clic en un botón. Haremos una consulta al archivo .php y, cuando recibamos la respuesta, la mostraremos en pantalla ocultando el loader.

Mostraremos la imagen de carga beforeSendy la ocultaremos en success.

Verás que tenemos 2 tipos de loader. Podemos utilizar código CSS o cargar una imagen .gif

 

 

 

Aqui puedes ver este ejemplo en funcionamiento. Como verás es muy simple.

 

Conclusión

Es muy buena idea mostrar el loader en la pantalla cuando va a buscar contenido  de su servidor. Con esto, los usuarios saben que la solicitud está en progreso.

Compartir esta entrada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image