Manuales Gratis
Ejemplo de programación Ajax con Mootools. Mostramos un texto traído con Ajax en una caja de alerta.
Vamos a ofrecer unas notas para aprender a programar con Ajax usando el
framework Javascript Mootools, a través de la realización de un
sencillo ejemplo. El ejercicio consiste en crear un enlace que, al
pulsarlo, realizará una conexión con Ajax para traerse los contenidos
de un archivo HTML, para mostrarlos en una caja de alerta.
Para los que no sepan lo que es Mootools, debemos referirles a nuestro .
En este artículo vamos a dar por sabidas muchas cosas de Mootools, pero
esperamos que con unos mínimos conocimientos se pueda seguir el
ejemplo. La versión del framework que estamos utilizando en estos
momentos es Mootools 1.2.
Para realizar estos ejemplos sencillos de Ajax utilizaremos la
clase Request de Mootools. Dicha clase es como un envoltorio del
XMLHttpRequest de Javascript, que se utiliza para crear conexiones
Ajax.
Para realizar una conexión Ajax tenemos que instanciar un
objeto de la clase Request, que se crea indicando una serie de opciones
y eventos, que nos servirán para configurar la conexión y especificar
las acciones a realizar durante el proceso de ejecución de la conexión.
En este primer caso veremos un reducido juego de opciones y eventos de
los que podemos utilizar en la clase.
Podemos ir .
Código HTML
Antes que nada, veamos el código HTML que necesitaríamos para
crear un enlace, luego modificaremos su comportamiento con Mootools.
<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>
El enlace tiene dos cosas que comentar. Primero el
href="javascript:void(0)", que sirve para que el enlace no haga nada al
pulsarse. Luego id="mienlace", que sirve para darle un nombre a ese
enlace para poder referirnos a él desde Javascript.
Configurar una conexión Ajax con Request de Mootools
Ahora veamos qué se debería hacer para configurar una conexión conAjax mediante la clase Request de Mootools.
var prueboRequest = new Request({
method: 'get',
url: 'archivo-html-solicitud.html',
onRequest: function() { alert('Acabas de iniciar una solicitud por Ajax!'); },
onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);},
onFailure: function(){alert('Fallo');}
}).send();
Como se puede ver, se ha creado un objeto prueboRequest que es
una instancia de la clase Request. Para configurar la conexión se
envían una serie de opciones:
method:
Sirve para definir que el método de conexión. En nuestro ejemplo será por GET
url:
Con esto indicamos la URL a la que queremos conectar con Ajax, para
traernos el contenido de la misma. Simplemente indicamos la ruta
relativa donde está el archivo al que nos conectamos. Por cierto que el
archivo 'archivo-html-solicitud.html' debemos haberlo creado en nuestro
servidor. Tal como está la ruta al archivo se entiende que se ha
colocado en el mismo directorio que el script.
onRequest:
Esto sirve para definir un evento en la conexión, que se ejecutará
cuando se inicie la conexión con el archivo. La función escrita a
continuación del onRequest contiene el código que de va a ejecutar al
inicio de la conexión Ajax. En nuestro ejemplo es un simple alert() de
Javascript.
onSuccess:
Esto sirve para especificar un evento, que se ejecutará en caso que
la conexión se realice con éxito. A continuación se debe escribir el
código de la función que se ejecutará al desatarse el evento, que tiene
la particularidad de recibir dos parámetros. El primero es el código
HTML del archivo traído por Ajax. El segundo contendrá la respuesta XML
del Request. En nuestro ejemplo la función simplemente muestra en una
caja de alert() de Javascript el contenido del código HTML.
onFailure:
Con este otro evento definimos qué hacer en el caso que la conexión con Ajax haya dado un error.
También debemos fijarnos en el último .send(), que es un método
que se llama sobre el objeto Request creado. Este método sirve para
poner en marcha la conexión Ajax.
Asociar esa conexión a un evento de clic en el enlace
Hasta ahora tenemos un enlace HTML y una instaciación de un
objeto de la clase Request. Pero tenemos que conectar estos dos
elementos, para que al pulsar el enlace se cree la conexión. Para ello
tenemos que añadir un evento al enlace y debemos realizarlo así en
Mootools:
//función que se va a ejecutar cuando esté listo el dom
window.addEvent('domready', function(){
//añado un evento al enlace para ejecturar al hacer clic
$('mienlace').addEvent('click', function(evento){
//creo y ejecuto un request como se ha visto anteriormente
});
});
El ejemplo sencillo de conexión Ajax con Mootools completo
El código completo del ejemplo es el siguiente.
<html>
<head>
<title>Request de Mootools</title>
<script src="mootools-1.2-core-yc.js" type="text/javascript"></script>
</head>
<body>
Request de Mootools, un envoltorio de XMLHttpRequest.
<p>
<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>
<script>
window.addEvent('domready', function(){
//función que se va a ejecutar cuando esté listo el dom
//añado un evento al enlace para ejecturar al hacer clic
$('mienlace').addEvent('click', function(evento){
//creo un request
var prueboRequest = new Request({
method: 'get',
url: 'archivo-html-solicitud.html',
onRequest: function() { alert('Acabas de iniciar una solicitud de contenidos por Ajax!'); },
onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);},
onFailure: function(){alert('Fallo');}
}).send();
});
});
</script>
</body>
</html>
Podemos .
Últimas aclaraciones para que este ejemplo Ajax-Mootools funcione
Ahora bien, conviene decir un par de cosas para terminar de
aclarar este ejemplo y que cualquiera de vosotros pueda ponerlo en
marcha en su ordenador o en su servidor web.
Como se puede haber entendido por las explicaciones anteriores,
para la puesta en marcha de este ejemplo necesitamos dos páginas
distintas. Una es la que tiene el código fuente del ejercicio y otra
página que es la que se conecta por Ajax para mostrar sus contenidos.
El archivo con el código Javascript lo podemos llamar de cualquier
manera, pero el archivo que nos traemos por Ajax debe llamarse
'archivo-html-solicitud.html', para que la ruta de la conexión
realizada en el Request funcione. Ambos archivos deben estar en el
mismo directorio.
Además, para que funcione correctamente la conexión con Ajax
debemos poner los archivos en un servidor Web. Si intentamos colocar
los archivos en un directorio cualquiera de nuestro disco duro y luego
abrir la página con código del ejemplo en un navegador, al intentar
hacer la conexión http por Ajax, nos dará un error. Si abrimos
directamente el archivo no se podrá realizar la conexión con Ajax. Por
lo tanto debemos pasar por un servidor web para que funcione. Para ello
debemos de hacer una de estas dos cosas:
- Podemos tener un servidor web instalado en local en nuestro
ordenador. Entonces simplemente colocamos los archivos en un directorio
de publicación y accedemos a ellos a través de localhost. Algo como
http://localhost/mootools-ajax/request-alert.html
- Colocar los archivos en un servidor de hosting que tengamos
contratado. Para ello los subimos por FTP a nuestro servidor como
habitualmente habremos hecho.
Esto es todo. Espero que este primer ejemplo de Ajax con Mootools
haya podido entenderse bien. Ahora puedes seguir leyendo y aprendiendo
con unas .
Enlaces: |
