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.

Escrito por manuel el Tuesday 4 de July 2006
Guardado en AJAX, Programacion