Las bondades del patrón AJAX son más que conocidas… La posibilidad de hacer peticiones de forma asíncrona que actualicen una parte de la página es una realidad de muchas webs. jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.
En este caso vamos a realizar una petición a una página para que nos devuelva un contenido, el cual incluiremos en una capa de nuestra página.
Así, lo primero será montar nuestra página HTML. Con su button y su div.
<!DOCTYPE html> <html> <head> <title>Petición AJAX con jQuery</title> </head> <body> <h1>Petición AJAX con jQuery</h1> <div id="mensaje"></div> <button id="cargar">Cargar</button> </body> </html>
Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.
<script src="jquery.js"></script>
Una vez configurado todo… vamos a resolver el tema en cuestión. Lo primero será capturar el onClick sobre el botón. Para ello, sobre el ID cargar asociamos la función click().
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
$("#cargar").click(function(){
// Petición AJAX
});
});
});</script>
Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros se descomponen en:
- url, es la URL que contendrá el fichero que nos devuelva los datos.
- data, son los datos a enviar a la URl de petición
- callback, es el método que se ejecutará cuando se realice la petición
- type, tipo de datos que se devolverán desde el servidor: text, xml, html, json,…
Así la petición AJAX será:
$.get("https://lineadecodigo.com/samples/datos.php", function(data){
$("#mensaje").html(data);
});
En ella se puede apreciar varias cosas. La primera que datos.php es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor… dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html()
Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.
