Para todo el que haya trabajado con formularios antes de la llegada de Ajax, sabrá que resulta bastante incomodo puesto que debemos crear la página HTML que contendrá al formulario, por otra parte el script PHP que lo procesa; y para terminar, si queremos confirmar al usuario que todo ha ido correctamente, tenemos que redirereccionar desde ese script a la misma página del formulario o a una tercera página donde le decimos al usuario que todo ha ido bien. En caso de fallo al procesar al formulario, había que volver al mismo (desde el script) enviando toda la información para no hacer que nuestro visitante tenga que volver a rellenar todo lo que ya ha hecho.

En definitiva, resultaba bastante laborioso e incómodo tener que hacer todo eso. Ensuciaba bastante el código y complicaba bastante la programación perdiendo demasiado tiempo en controlar todo eso.

Ahora con Ajax todo es bastante más cómodo. Primero, podemos validar el formulario directamente sin tener que redireccionar al usuario al script PHP para comprobarlo alli (aunque ya se podía hacer con javascript, con Ajax es todavía más cómodo).  Y a la hora de procesar/enviar el formulario, tenemos lo que se conoce como envío asíncrono de formularios, por lo que podemos hacer que el navegador envíe el formulario sin necesidad de recargar una nueva página. De esa manera podremos mostrar el resultado de dicho proceso directamente en la misma página del formulario sin necesidad de recargarla completamente.

Para explicar su funcionamiento, veamos un ejemplo utilizando jQuery como librería Ajax:

Suponemos que tenemos un formulario para el alta de clientes, por ejemplo:

El usuario debe rellenar los datos necesarios, pulsar en el botón Enviar y se dará de alta en la web. La idea es realizar todo el proceso utilizando el envío asíncrono con Ajax por lo que no habrá que recargarse ninguna página. Cuando el botón pulse enviar mostraremos un texto que indique que se está llevando a cabo la operación y acto seguido mostraremos la confirmación de que ésta ha finalizado. En caso de error se mostrará el mensaje oportuno de forma que el usuario tendrá ocasión de volverlo a intentar o de corregir los fallos que pudiera haber cometido (y que no hayan sido validados previamente). Como ventaja para el programador, no hemos tenido que tener en cuenta en el script PHP nada de todo esto, puesto que es Ajax quién procesa “en segundo plano” el script y permite que no haya que ir y volver del formulario al script PHP continuamente siempre que aparece algún error al ejecutar dicho script.

Simplemente deberíamos ver algo como esto (sin ninguna recarga de página de por medio):

Ahora vamos al código a ver que hay que hacer para que esto funcione:

En cuanto al código HTML del formulario, nada cambia. Lo codificaremos como hasta ahora lo haciamos sin utilizar el envío asíncrono, indicando cual será el script PHP que lo procesará y asignando un id al formulario. Además, incluiremos al final del formulario (debajo del cierre de la etiqueta form) el código HTML para dos capas (en principio vacias) que utilizaremos para mostrar mensajes al usuario sobre el proceso. Quedaría algo asi:

<form id="formulario" method="post" action="run/_nuevo_cliente.php">
    <fieldset>
    <legend>Datos de Usuario</legend>
 
    <ol>
    <li>
        <label>Usuario</label>
        <input type="text" name="usuario" id="usuario" size="20"/>
    </li>
    <li>
        <label>Contraseña</label>
        <input type="password" name="contrasena" size="20" minlenght="2"/>
 
    </li>
    </ol>
    </fieldset>
 
    <fieldset>
    <legend>Datos Fiscales</legend>
    <ol>
    <li>
        <label for="nombre"><strong>Nombre</strong></label>
 
        <input type="text" name="nombre" size="30" class="required"/>
    </li>
    <li>
        <label>CIF</label>
        <input type="text" name="cif" size="9" maxlength="9"/>
    </li>
    <li>
        <label>Dirección</label>
 
        <input type="text" name="direccion" size="40"/>
    </li>
    <li>
        <label>Población</label>
        <input type="text" name="poblacion" size="30"/>
    </li>
    <li>
        <label>Provincia</label>
 
        <input type="text" name="provincia" size="20"/>
    </li>
    <li>
        <label>CP</label>
        <input type="text" name="cp" size="5" maxlength="5"/>
    </li>
    <li>
        <label for="pais">País</label>
 
        <input type="text" name="pais" id="pais" size="20" value="España"/>
    </li>
    <li>
        <label>Teléfono</label>
        <input type="text" name="telefono" size="20"/>
    </li>
    <li>
        <label>Móvil</label>
 
        <input type="text" name="movil" size="20"/>
    </li>
    <li>
        <label>Fax</label>
        <input type="text" name="fax" size="20"/>
    </li>
    </ol>
    </fieldset>
 
    <fieldset>
    <legend>Otros Datos</legend>
    <ol>
    <li>
        <label>E-Mail</label>
        <input type="text" name="web" size="30" class="email"/>
    </li>
 
    <li>
        <label>Página Web</label>
        <input type="text" name="email" size="30" class="url"/>
    </li>
    <li>
        <label>Observaciones</label>
        <textarea name="observaciones" cols="30" rows="5"></textarea>
 
    </li>
    </ol>
    </fieldset>
    <fieldset class="submit">
        <input type="submit" value="Enviar"/> 
    </fieldset>
</form>
<div id="mensaje"></div>
<div id="resultado"></div>

Ahora nos pondremos manos a la obra con la parte de Ajax y necesitaremos crear la siguiente función en un fichero al que podremos llamar miAjax.js:

jQuery(function() {
    // Indicador de carga
    var loader = jQuery('<div id="loader">Enviando . . .</div>')
        .css({position: "relative", bottom: "0px", left: "center", color: "#690D1A", padding: "5px"})
        .appendTo("#mensaje")
        .hide();
 
    jQuery("#formulario").ajaxStart(function() {
        loader.show();
    }).ajaxStop(function() {
        loader.hide();
    }).ajaxError(function(a, b, e) {
        throw e;
    });
 
    var v = jQuery("#formulario").validate({
        submitHandler: function(formulario) {
            jQuery(formulario).ajaxSubmit({
                target: "#resultado",
                success: function(responseText, statusText) {
                }
            });
        }
    });
});

Como se puede observar en el código, para indicar que el formulario está en proceso se utiliza una capa llamada loader que podríamos tener definida en nuestra hoja de estilo para que muestre el texto con cierto formato, una imagen, una animación o cualquier otra cosa que nos apetezca mostrar en ese momento. En este caso se le aplican las reglas de estilo en el propio código javascript. Ese texto se mostrará en la capa mensaje mientras que el resultado final se muestra en la capa resultado (bloque final de código).

Para terminar, incluimos este fichero junto con los de jQuery al inicio del fichero HTML, dentro de la cabecera del mismo:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="miajax.js"></script>

Share