En el artículo anterior estuvimos explicando las primeras nociones que debemos conocer para trabajar con Ajax en Mootools, con un par de versiones de código Javascript, más o menos corto, que podemos utilizar para hacer una solicitud al servidor. Ahora veamos alguna de las tareas más habituales que vamos a necesitar realizar en nuestras aplicaciones Ajax, como es el enviar por POST o GET datos al servidor, a procesar en la página que estamos solicitando.

El sistema que veremos es muy sencillo, ya que Mootools provee de la infraestructura necesaria para realizar el envío de datos por cualquiera de los dos métodos posibles (POST y GET). Además, encontraremos que existen diversos modos también de conseguir enviar datos por cualquiera de los métodos. Utilizaremos una u otra manera dependiendo de nuestros conocimientos o necesidades a la hora de escribir nuestras aplicaciones web.

Opciones para envío de datos en Request

Existen dos opciones que podemos enviar al constructor de Request, en el objeto de options, para enviar datos por POST y GET.

Propiedad "method": es un string que puede ser "post" o "get", para indicar el método por el que se enviarán los datos. Por defecto toma el valor "post".

Propiedad "data": es un string con la cadena, con pares nombre de variable y valor, que se enviará al servidor, algo como "id=12&elemento=zapatos".

Estas dos variables las podemos utilizar al construir nuestro objeto Request, de la siguiente manera:

var miAjax = new Request({
   "url": "recibo-get.php",
   "method": "get",
   "data": "nombre=pepe&edad=27",
   "onSuccess": function(respuesta){
      $("contenedorajax").set("html", respuesta);
   }
}).send();

En este caso estamos eligiendo el método GET y además le estamos pasando en la solicitud a la página recibo-get.php los datos: "nombre=pepe&edad=27".

Por tanto, necesitaremos una página PHP que reciba los datos que se envían por GET, que podría tener un código parecido a este:

Esto es una página que recibo por Ajax.
<br>
Los valores que recibo por GET son:
<ul>
<li>Nombre: <?php echo $_GET["nombre"];?></li>
<li>Edad: <?php echo $_GET["edad"];?></li>
</ul>

Podemos ver en marcha el ejemplo en una página aparte.

Enviar los datos por medio del método send()

A través de la función que sirve para comenzar la solicitud Ajax, el método send() de la clase Request, podemos enviar un objeto de options con la configuración que deseamos que tenga nuestra llamada Ajax. Por tanto, podremos especificar también como parámetro de send() atributos para configurar el objeto Request, entre ellos la propiedad "data", que guarda el querystring que queremos enviarle a la página a solicitar por Ajax.

Veamos este otro ejemplo de script, que realiza el envío de datos por el método POST.

var miAjax = new Request({
   "url": "recibo-post.php",
   "onSuccess": function(respuesta){
      $("contenedorajax").set("html", respuesta);
   }
}).send({"data": "provincia=malaga&ciudad=marbella"});

Como podemos ver, ahora estamos llamando a un archivo llamado "recibo-post.php" y no estamos indicando la propiedad "method", por lo que los datos que enviemos a esta página viajarán por POST, que es el valor por defecto para dicha propiedad. Pero hay que fijarse sobre todo en la llamada al método send(), en la que pasamos un objeto con la propiedad "data" y el valor que se desea enviar, con todos los datos del POST "provincia=malaga&ciudad=marbella".

Ahora para recibir estos datos, tendremos que codificar el archivo "recibo-post.php", o cualquier otro con el que estemos trabajando, con un contenido similar al siguiente:

En este caso estoy Los valores que recibo por POST son:

<ul>
<li>ciudad: <?php echo $_POST["ciudad"];?></li>
<li>provincia: <?php echo $_POST["provincia"];?></li>
</ul>

Podemos ver el ejemplo en marcha en una página aparte.