Una de las principales ventajas de esta tecnología bautizada como AJAX, es la posibilidad de realizar conexiones y transferencia de datos asíncronas. Esta ventaja, tambien podemos usarla para el envío de formularios, consiguiendo así que el navegador no cargue otra página cuando cuando pulsamos el boton submit del formulario, sino que seamos nosotros los que tengamos el control para mostrar el siguiente paso al usuario en la misma página.
Voy a intentar documentar en este post, varios ejemplos de envío de formularios de forma asíncrona tomando como base los toolkits AJAX más conocidos:
Con Dojo Toolkit
Primero creamos la funcion javascript que va a ser llamada cuando se produzca el evento «submit» del formulario:
<script type="text/javascript" src="http://tb.innoa.com/js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require ("dojo.io.*"); function dojoForm(form) { if (document.presForm.email.value != '') { var kw = { mimetype: "text/plain", formNode: form, load: function(t, txt, e) { var formBox = dojo.byId('formBox'); if (formBox) formBox.innerHTML = '<strong>Gracias por contactar con nosotros</strong&g;. Pronto recibirás noticias nuestras ;)'; }, error: function(t, e) { alert("Error!... " + e.message); } }; dojo.io.bind(kw); } else alert ('Por favor, introduce tu email'); return false; } </script<
Un ejemplo de formulario que usara esta función:
<div id="formBox" style="clear:both;"> <form name="presForm" id="presForm" method="post" action="/enviar/form" onsubmit="try{dojoForm(this)}catch(E){};return false;"> <label>E-mail: <input type="text" name="email" id="email" /></label> <input type="submit" value="Enviar" /> </form> </div>
En este caso, se trata de un formulario para dejar tu email (por ejemplo para apuntarse a una newsletter). Una vez que se pulsa el botón de enviar (o la tecla Enter), se llama a la función javascript «dojoForm» y se produce el envío de forma asíncrona.
Como se puede ver en la función, una vez que se ha finalizado, lo que hacemos es sustituir el formulario por un mensaje para el usuario.
Con Prototype
Creamos la función javascript que enviará el formulario:
<script type="text/javascript"> src="prototype.js"></script> <script type="text/javascript"> function protoSend(){ var params = Form.serialize($('presForm')); new Ajax.Updater('formBox', '/enviar/form', {asynchronous:true, parameters:params}); } </script>
El ejemplo de formulario sería ahora:
<div id="formBox" style="clear:both;"> <form name="presForm" id="presForm" method="post" action="/enviar/form" onsubmit="protoSend();return false;"> <label>E-mail: <input type="text" name="email" id="email" /></label> <input type="submit" value="Enviar" /> </form> </div>
En este caso, prototype se encargará de mostrar en el div donde estaba el formulario la salida del script que recibe los datos del formulario.
Y que tal solventariais los formularios con ficheros?
Gracias y Saludos
En la implementación actual, XMLHTTP no soporta el envÃo de ficheros, por lo que no se puede. El toolkit dojo sin embargo, de forma automática (o se la podemos especificar) elige la mejor forma para el envÃo (transport method), que puede ser XMLHTTP o IFRAME por ejemplo, por lo que podrÃa ser posible con este último (IFRAME).
Buff! Es curioso como chapucean los que hacen estas tecnologias
Ultimamente me cruzo con cosas asi. La ultima el WPA en el gnome
Chapuzassss!
Interesante comparativa.
Lo de los ficheros me extrañaria que se pueda..
Por otro lado, se podrian refinar los ejemplos para que sea no-intrusivo:
…
con lo cual, si algo no funciona enviaria el formulario a pelo.. lo cual requiere discriminar en el servidor, pero eso es otra historia
Cuando lo prueve te comentaré. De todas gracias por la publicacion
Lo estoy probando y no me va. No acabo de entender el código. Alguien puede ayudarme?
Muito obrigada! Essa dica me ajudou muito em um projeto que estou desenvolvendo. To começando a usar prototype ^^
y cmo serÃa si quiero enviar adjunto al mensaje un archivo (atacharlo)
Saludos y gracias por esas pastillitas de sabidurÃa.
Hola Ervin,
actualmente no se pueden enviar archivos usando el componente XMLHTTPRequest, pero hay algunas herramientas como el yui ( http://developer.yahoo.com/yui/ ) que lo hacen usando un iframe oculto.
Saludos
Hola Manuel, estoy trabajando una aplicacion web con Dojo 1.2.3 y tengo el siguiente problema. Por Ejemplo. Dependiendo de la selecciona que realice en un combo (dojo) en una capa se me debe cargar otros datos para llenar. En esta parte tengo controles dojo (Por ejemplo: DateTextBox o un Filtering Select, pero al cargarlos por medio de un Axax, la funcionalidad que les da el dojo deja de funcionar, y me aparecen como simples controles html). Como hago para cargar controles dojo a través de un Ajax!!?? Help me!!
Hola Edgar,
una vez cargado el contenido Ajax, debes ejecutar el parser:
dojo.parser.parse(dojo.byId(‘idDelElementoQueContieneLosWidgets’));
Saludos