Contenido

Tutorial de Ajax con Prototype

18 dic

+ 13

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.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.