Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools (XIV)

Ajax: recibir archivos

Introducción

Suponemos que ya debemos saber lo que es ajax y para qué sirve, si no es así se recomienda ver primero el Manual de Ajax.

Con ajax podemos incorporar datos de otros archivos a la página, así como enviar datos desde nuestra página a otras. En esta página veremos cómo traer archivos a nuestra página con ajax utilizando mootools, para después incorporarlos a la página o hacer con ellos otras cosas.

Para trabajar con ajax usando mootools basta con tener cargado el archivo "core" de mootools.

Insertar un archivo:

Ajax basa su técnica en el uso del objeto XMLHttpRequest. Moootools nos da ya hechos la mayoría de los pasos para utilizar este objeto simplificándolo mediante el objeto Request().

Veamos un ejemplo sencillo de cómo insertar un archivo llamado contenido.html en un elemento de la página con id="capa1"

En primer lugar creamos el archivo que vamos a insertar, el cual tiene el siguiente contenido:

<h2>prueba ajax</h2>
<p>Este es un archivo con contenido HTML para insertar con AJAX</p> 

Guardamos este archivo con el siguiente nombre: contenido.html, en el mismo directorio que la página en la que lo queremos ver.

A continuación en nuestra página creamos un elemento donde recogeremos el archivo anterior mediante ajax:

<div id="capa1"></div>

Y ahora creamos el código javascript/mootools que hace que traigamos el archivo con ajax, en este tenemos varios pasos: en primer lugar instanciamos el objeto Request():

ajax1=new Request({
   "url":"contenido.html"
   })

Como argumento, podemos pasar al archivo una serie de pares "propiedad":"valor". En este caso sólo hemos pasado uno, que consiste en "url", y el "archivo que queremos insertar".

Los siguientes pasos son llamar al evento onsuccess, que indica lo que hay que hacer cuando la llamada se ejecuta con éxito, y por último llamar al método send() que ejecuta la llamada:

ajax1.addEvent("success", function(respuesta){
   $("capa1").set("html",respuesta)
   });
ajax1.send();

El resultado será la incorporación del archivo externo a la página, de forma parecida a como vemos aquí a la derecha.

Aquí hemos incorporado el archivo a la página, sin embargo el archivo es recibido como argumento de la función (respuesta), por lo que podemos utilizarlo de diferentes maneras, según lo que indiquemos en la función (ver para esto el manual de Ajax).

Simplificar el código

Podemos simplificar el código anterior, poniendo todos los pasos dependiendo del objeto Request() en el momento de ser creado. Añadimos para ello el evento success (escrito onSuccess dentro del argumento, y después le aplicamos el método send(). En el ejemplo anterior quedará así:

new Request({
   "url":"contenido.html",
   "onSuccess":function(respuesta){
      $("capa1").set("html",respuesta)
      }
   }).send(); 

El objeto Request.HTML()

Una de las prácticas más habituales de ajax es incorporar un archivo con código HTML en la página, tal como hemos hecho en el ejemplo anterior. Es por ello que como un objeto dependiente de Request, tenemos el objeto Request.HTML, que simplifica este trabajo.

Para ello en la lista de opciones dentro del argumento, ponemos la propiedad "update", cuyo valor será el id del elemento en el que queremos mostrar el archivo. En el ejemplo anterior el código será el siguiente:

new Request.HTML({
   "url":"contenido.html",
   "update":"capa1"
   }).send();

En todos los ejemplos aquí mostrados el resultado será el mismo, ya que son diferentes formas de realizar un mismo proceso. Sin embargo este último resulta más simple siempre que lo que queramos sea incorporar el archivo a la página directamente.

Más sobre Ajax

El uso de Ajax resulta extremadamente simple con mootools, ya que con unas pocas líneas incorporamos un archivo externo a la página. Sin embargo debemos tener las mismas precauciones que hemos indicado en el manual de Ajax.

Una de ellas es el problema con los acentos y signos que no existen en inglés. En el Manual de ajax, página 13 indicamos cómo resolverlos.

Existe también el objeto Request.JSON, para trabajar con JSON, y con características parecidas a los anteriores. Sin embargo, no trataremos esto en este manual. Si quieres ver en qué consiste puedes consultarlo en Mootorial:Request.JSON

La siguiente página es la segunda dedicada a ajax con mootools. Veremos cómo enviar datos al servidor utilizando mootools.

ajax: enviar datos.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com