Un ejemplo rápido de Ajax con jQuery, usando el método load(), uno de los muchos que ofrece la librería para hacer solicitudes asíncronas contra un servidor web.
Ha llegado el momento de hacer una primera aproximación a Ajax, en la serie de artículos que estamos publicando en DesarrolloWeb.com para mostrar el uso de este librería Javascript. (léase el Manual de jQuery).
Una de las ventajas de las librerías Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fácil y encima, sin tener que complicarnos la vida con la compatibilidad entre distintos navegadores. Sin duda, cualquier persona que sepa un poco de Javascript, podría en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. Nosotros vamos a demostrar cómo es de sencillo en jQuery.
La primera impresión que he tenido sobre el uso de Ajax en jQuery es realmente grata, por la facilidad con la que se puede realizar un primer ejemplo. Se trata de un ejemplo extremadamente sencillo, pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. Habíamos visto en otras librerías Javascript ejemplos similares, como en el artículo Ajax con Mootools, pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan sólo 4 líneas de código, de las cuales sólo 1 es para ejecutar la propia llamada al servidor por Ajax.
Traer un contenido con Ajax al pulsar un enlace
En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. En este caso el servidor nos devolverá directamente un contenido con un poco de HTML, que se volcará automáticamente en la página.
Aquí podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.
<a href="#" id="enlaceajax">Haz clic!</a>
Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un evento a un enlace. No obstante, recordemos cómo asignar una función para cuando se haga clic en el enlace:
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
});
});
Ya se trata sólo de poner en marcha Ajax dentro de la función del evento "click" sobre el enlace. Pero antes voy a necesitar un elemento de la página donde se mostrará el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder referirnos a ella desde jQuery:
<div id="destino"></div>
Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con esta librería Javascript. Una única línea de código será suficiente para programar el comportamiento Ajax:
$("#destino").load("contenido-ajax.html");
Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocación al método load() de un elemento de la página, en concreto el que habíamos puesto con id="destino". Al método load() le pasamos como parámetro la ruta de la página que queremos cargar dentro del elemento.
El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la página web donde está el script jQuery.
Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador. Si quieres en esta página puedes encontrar varias sugerencias para levantar un servidor web sencillo mediante un simple comando en tu terminal.
Código completo del ejemplo de Ajax sencillo
Es así de simple! con una línea de código hemos conseguido acceder a cierto contenido por Ajax. Es un contenido estático porque está en un archivo HTML, pero podría perfectamente traerse una ruta de un archivo PHP que acceda a base de datos y haga cualquier tipo de trabajo para componer el resultado, lo que lo haría todo lo dinámico que fuera necesario.
Ahora podemos ver el código completo de este ejemplo de Ajax con jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax tremendamente sencillo con jQuery</title>
</head>
<body>
<p>
<a href="#" id="enlaceajax">Haz clic!</a>
</p>
<div id="destino"></div>
<script src="../js/jquery-3.6.3.js"></script>
<script>
$(document).ready(function () {
$("#enlaceajax").click(function (evento) {
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
$("#destino").load("contenido-ajax.html");
});
});
</script>
</body>
</html>
Cabría comentar que jQuery tiene muchos otros métodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. Nosotros hemos escogido el más sencillo para dar una primera demostración de las posibilidades.
Pasar parámetros y ejecutar acciones después de la llamada a Ajax
El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros opcionales que podemos utilizar si fuera necesario:
1) Parámetros a pasar a la página
La página que carguemos con Ajax puede recibir parámetros por la URL, que se especifican con la típica notación de propiedades y valores de jQuery.
{nombre: "Pepe", edad: 45}
Por ejemplo, con ese código estaríamos enviando a la página los datos nombre y edad, con los valores "pepe" y 45. Esos datos viajarían en la URL, por el método "POST".
2) Función callback
Como otros métodos de jQuery, podemos especificar opcionalmente una función a ser ejecutada cuando se termine de ejecutar el método. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje típico de "cargando...".
Ahora veamos un código donde hacemos uso de estos dos parámetros:
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function() {
alert("recibidos los datos por ajax");
});
});
});
En este caso estamos cargando con load() una página PHP llamada "recibe-parametros.php". Estamos pasando los parámetros "nombre" y "edad" a una página, que podremos recoger por GET. Además, hemos colocado una función callback en la que simplemente hacemos un alert(), que se ejecutará cuando la llamada a Ajax haya terminado.
El código fuente de "recibe-parametros.php" podría ser algo como esto:
Recibido el siguiente dato:
<br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>
Conclusión
Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como decía, existen muchas otras maneras de hacer conexiones Ajax con jQuery, como el ejemplo del artículo siguiente que nos enseña a mostrar un mensaje de carga miestrás esperamos la respuesta Ajax del servidor. Además, para complementar esta información, también podéis ver el vídeo de Ajax con jQuery.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...