Saltar la navegación

AJAX

No podemos terminar este curso sin hablar de AJAX.

AJAX es el acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), algo difícil de comprender para cualquiera que no esté muy familiarizado con los lenguajes de programación.

AJAX nos permite hacer peticiones asíncronas (leer otra página sin salir de la página en la que estamos). Así podemos actualizar datos de nuestra página, guardar datos en una base de datos, etc. sin salir de nuestra página.

Lo entenderemos mejor con un ejemplo:

  • Tenemos una página que muestra datos económicos en tiempo real.
  • Cada vez que recargamos la página se cargan los datos actualizados.
  • Cuando recargo la página lo único que cambian son los números, todo lo demás (la cabecera, las tablas...) sigue igual.
  • ¿No sería más cómodo recargar únicamente lo que cambia? Podemos hacerlo con AJAX.

Veamos un ejemplo real:

  • Tenemos nuestra página (es la página cuyos datos aparecen actualizados cada vez que la recargamos).
  • Tenemos un archivo que devuelve los datos actualizados.
  • Añadimos a nuestra página un enlace que nos permite, usando AJAX:
    • Leer el contenido del archivo con los datos actualizados.
    • Actualizar los datos en nuestra página.

Descargar el ejemplo completo

¡Hemos actualizado nuestra página sin necesidad de salir de ella! Lo hemos hecho mediante una petición asíncrona (usando AJAX).

Usando jQuery

Como muchas otras cosas, resulta más fácil hacer peticiones AJAX usando una librería como jQuery

Descarga el ejemplo hecho con jQuery, verás que hemos sustituido un montón de código por:

function actualizarDatos(url){
    $("#ejemplo").load(url);
}

Se trata, una vez más, de un ejemplo sencillo. Si queréis saber más acerca del uso de AJAX en jQuery podéis consultar la documentación de la librería.