En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. Esto lo hemos puesto
en marcha en el servidor de DesarrolloWeb.com y lo puedes ver en una página aparte.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
una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para
poder referirnos a ella desde jQuery:
Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única
línea de código será suficiente:
$("#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.
Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se
carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y
los ejecutas tal cual, no te funcionará. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener
instalado en tu ordenador.
Así de simple! Podemos ver el código completo de este ejemplo:
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("contenido-ajax.html");
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>
</body>
</html>
Podemos ver el ejemplo en marcha en una página aparte.
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.
No hay comentarios:
Publicar un comentario