Via Del.icio.us me encuentro este tutorial bastante básico con el que podremos hacer funcionar nuestro Ajax usando Prototype como base de nuestras aplicaciones. Personalmente prefiero MooTools ya que además disponemos de efectos y el método send() me ha enamorado.
Configurando tu aplicación
Los pasos de configuración son bastante básicos, únicamente tendremos que declarar la inclusión de nuestro fichero prototype.js en el <head></head> de nuestra aplicación.
<script src="prototype.js" type="text/javascript"></script>Una vez añadida la librería a nuestra aplicación ya disponemos de todas las funcionalidades que esta nos ofrece, como por ejemplo $() o $F(), que se trata de una versión rápida de $('id').value. Por lo tanto podremos recoger los datos de nuestro formulario de una forma muy fácil de implementar.
var nombre=$F('nameUser');
var apellido=$F('surnameUser');
var direccion=$F('directionUser');
Una vez recogidos todos los elementos que necesitamos los fusionamos todos en un String para pasarla como parametros a la página siguiente.
var param= 'name=' + nombre + '&surname=' + apellido + '&direction=' + direccion;
Una vez ya montados nuestros parametros nos falta la dirección hacia la que vamos a enviar nuestros parametros, y de la cual podremos recuperar los datos obtenidos.
var url = 'paginaReceptora.php';Y ahora la llamada al objeto que nos realizará la consulta mediante Ajax y nos enviará los datos a la página definida anteriormente.
var ajaxRequest = new Ajax.Request(
url,
{
method: 'get',
parameters: param,
asynchronous: true,
onComplete: showResponse
});
function showResponse(xmlHttpRequest, responseHeader)
{// Función que recibe el resultado de la petición
}Como podemos ver en negrita, tenemos las 2 variables que hemos definido antes tuna más como valor de onComplete que nos remitirá a la función showResponse en cuanto nuestra petición Ajax haya devuelto algún resultado. En ella es donde definiremos las acciones que deseemos realizar una vez entregados esos datos, asi que aqui nuestra imaginación y nuestra aplicación mandan.
8 comentarios, 1 referencias
+
#