Vídeo en el que mostraremos dos ejemplos muy sencillos de Ajax con el framework Javascript Mootools.
El vídeo muestra el proceso desde el inicio, que sería la descarga del framework Javascript y la inclusión en una página web. Luego se hace un script con Javascript que, haciendo uso de las librerías de Mootools, se conecta con el servidor para traerse un contenido sencillo. En concreto vamos a hacer dos ejemplos, uno extremadamente sencillo y otro un poco más complejo, que hace uso de algunas características de las conexiones Ajax que nos permite Mootools.
En el ejemplo tendremos una capa y un enlace. Al pulsar el enlace se conectará por Ajax para traerse un contenido que está en un fichero aparte. En el primero obtendremos el archivo tal cual y en el segundo vamos a utilizar un tipo de conexión más elaborada que nos permitirá enviar un dato por POST a la página que se solicitará por Ajax.
Ambos ejemplos espero que sirvan para ilustrar el modo con el que se puede hacer una solicitud Ajax. Aunque están explicados desde cero, será interesante que el lector sepa lo que es Mootools o cómo utilizarlo para hacer Ajax. Todo esto está explicado en DesarrolloWeb.com en el Manual de Mootools y en los artículs de ejemplos por Ajax en Mootools.
Os dejamos con el vídeo de una duración de 10 minutos, para poder subirlo a YouTube. Espero que las explicaciones no sean demasiado rápidas para que se pueda entender bien.
Código de los ejemplos
Dejo por aquí el código de estos dos ejemplos, por si alguien lo quiere copiar y pegar para probar todo esto.Ejemplo1:
<html><head>
<title>ej1</title>
<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
//para ejecutar cuando está lista la página
$("enlaceajax").addEvent("click", function(evento){
evento.stop();
$("capaajax").load("contenido-ajax.html");
});
});
</script>
</head>
<body>
<div id="capaajax"></div>
<br>
<br>
<a href="#" id="enlaceajax">Enlace para cargar contenido Ajax</a>
</body>
</html>
El ejemplo lo hemos publicado en DesarrolloWeb.com en una página aparte.
Ejemplo2:
<html><head>
<title>ej2</title>
<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
//para ejecutar cuando está lista la página
$("enlaceajax").addEvent("click", function(evento){
evento.stop();
//$("capaajax").load("contenido-ajax.html");
var miAjax = new Request.HTML({
url: "otro-ajax.php",
method: "post",
data: "cosa=valor",
update: $("capaajax")
});
miAjax.send();
});
});
</script>
</head>
<body>
<div id="capaajax"></div>
<br>
<br>
<a href="#" id="enlaceajax">Enlace para cargar contenido Ajax</a>
</body>
</html>
Puede verse en marcha.
Para el que lo desee, he colocado un ZIP con el código de los ejemplos Ajax.
Esto debe colocarse en un servidor web
Ya lo mencionamos en el vídeo: las conexiones por Ajax se realizar por HTTP, por lo que necesitamos publicar el ejemplo en un servidor web para que funcione.Podemos colocarlo en local, en un servidor que podamos tener instalado en nuestro ordenador, o en remoto, en un espacio de alojamiento web.
Si queréis instalar un servidor en vuestro ordenador os recomiendo probar con Wamp
. Como os digo, cualquier espacio de hosting, también os servirá para probar estos archivos, que tendríais que subir por FTP al servidor.Mencionar además que el segundo ejemplo envía datos por POST y nosotros los recibimos a través de un archivo PHP. Por ello, os vendrá bien tener un servidor que soporte PHP, para que el segundo ejercicio pueda mostrat el contenido que se envía por POST.
Espero que estas prácticas de Ajax con Mootools sirvan de utilidad para los lectores de DesarrolloWeb.com
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...