Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Para continuar con la gente que quiere seguir viendo ejemplos sobre la serie de Ajax y jQuery, les tengo preparado un ejemplo más completo, muy sencillo, implementando peticiones asíncronas en los links de un menú. Por supuesto si hacemos esto vamos a usar la idea de Hijax para asegurarnos de que el sitio funcione con y sin Ajax.

Comencemos sin Ajax

El HTML que usaremos de ejemplo, como así también el CSS será muy básico para no desconcentrarnos del punto inicial del Ajax usado con jQuery. Básicamente se trata de un menú creado con una lista no ordenada (<ul><li>). En primer lugar les dejo los archivos del mini sitio sin absolutamente una línea de JavaScript, completamente funcional. Veamos el ejemplo de la primera página.

Continúa leyendo Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Ajax y jQuery 4/6 – Mostrando mensaje de cargando

En el artículo anterior sobre esta serie de Ajax y jQuery vimos como utilizar las librería jQuery para realizar llamadas asíncronas al servidor de tipo GET y POST. Lo que nos quedaría pendiente sería como hacer para mostrar al usuario algún mensaje que indique que una llamada de este tipo se está realizando, ya que si no mostramos nada el usuario no sabrá que algo se está ejecutando. Pasemos entonces a ver como jQuery nos ayuda con esta funcionalidad.

Eventos de jQuery para detectar llamadas Ajax

Existen 6 eventos en jQuery que nos permiten manejar los estados de la conexión asíncrona que realizamos.

  • ajaxStart(): La conexión al servidor se ha abierto. ver más
  • ajaxSend(): La petición GET o POST fue enviada. ver más
  • ajaxSuccess(): La petición volvió sin errores en la comunicación. ver más
  • ajaxError(): La petición obtuvo un error por ejemplo un 404. ver más
  • ajaxComplete(): La petición ha finalizado, independientemente de haberse devuelto un success o error. ver más
  • ajaxStop(): La conexión al servidor se ha cerrado. ver más

Al principio tantos eventos me resultaron un poco confusos, especialmente entre ajaxStart() y ajaxSend(), y ajaxComplete() y ajaxStop() pero sin embargo con el ejemplo que veremos se puede ver bien el funcionamiento.

Continúa leyendo Ajax y jQuery 4/6 – Mostrando mensaje de cargando