Envío asíncrono de formularios con AJAX

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.

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

11 comentarios en «Envío asíncrono de formularios con AJAX»

  1. 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).

  2. Buff! Es curioso como chapucean los que hacen estas tecnologias

    Ultimamente me cruzo con cosas asi. La ultima el WPA en el gnome

    Chapuzassss!

  3. 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

  4. Muito obrigada! Essa dica me ajudou muito em um projeto que estou desenvolvendo. To começando a usar prototype ^^

  5. 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!!

  6. Hola Edgar,

    una vez cargado el contenido Ajax, debes ejecutar el parser:

    dojo.parser.parse(dojo.byId(‘idDelElementoQueContieneLosWidgets’));

    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *