Manuales Gratis
Desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery.
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 framework (léase el ).
Una de las ventajas de los 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 otros frameworks Javascript ejemplos
similares, como en el artículo ,
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. Esto lo hemos puesto en marcha en el
servidor de DesarrolloWeb.com y .
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 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 .
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:
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".
Nota: Desde jQuery 1.3 también se pueden enviar los parámetros a
la página a cargar con Ajax por medio de una variable de tipo string,
en lugar de una notación de objetos como hemos comentado. Cuando se use
un string para especificar los parámetros a enviar en el request http,
éstos viajan por el método GET. Cuando se utiliza una notación de
objetos como la que hemos visto, los datos viajan por el método POST.
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...".
Nota: En un artículo anterior ya comentamos el habitual uso de .
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.
Este sería el código fuente de "recibe-parametros.php":
Recibido el siguiente dato:
<br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>
Podemos .
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 . Además, para complementar esta información, también podéis ver el vídeo de Ajax con jQuery.
Enlaces: |
