Gracias a un excelente artículo de Alex Sancho me he atrevido a desarrollar una primera aplicación basada en AJAX y he aprovechado ya para hacerlo sobre un proyecto real, Artesonico.com
La aplicación en cuestión ha sido pasar un formulario html-php-mysql a AJAX para hacer la llamada directamente a un php que se encargará de guardar los datos y enviar un email al usuario.
Dicho esto, vamos al grano…
En primer lugar hemos descargado las librerías necesarias para poder ejecutar Ajax, moo.ajax y prototype.lite. Una vez descargadas la incluimos en un directorio donde guardaremos todas las librerías javascript que utilicemos, en este caso el directorio “js”.
Lo siguiente consiste en adaptar el HTML que teníamos anteriormente en artesonico.com (prometo que quería hacerlo sin tablas pero por motivos de tiempo no he podido desarrollarlo así ). Básicamente lo que hacemos es añadir Divs con los estados que tendrá la aplicación y asignarles un id para poder hacerlos visibles e invisibles mediante javascript e incluir las librerías.
Aquí podemos ver el HTML completo:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<script type="text/javascript" src="js/prototype.lite.js"></script>
-
<script type="text/javascript" src="js/moo.ajax.js"></script>
-
<script type="text/javascript" src="js/artesonico.js"></script>
-
<meta http-equiv="Content-Type" content="text/html; UTF-8">
-
<title>Artesónico. Comunidad de artistas digitales. Músicos, editores de video, efectos de sonido, Motion Graphics</title>
-
<style type="text/css">
-
<!--
-
.negro {
-
font-size: 11px;
-
font-family: tahoma;
-
color: #000000;
-
}
-
.boton-negro {
-
font-family: Tahoma;
-
color: #FFFFFF;
-
font-size: 10px;
-
font-weight: bold;
-
background-color: #000000;
-
border-top-style: none;
-
border-right-style: none;
-
border-bottom-style: none;
-
border-left-style: none;
-
}
-
.campo-texto {
-
font-family: Tahoma;
-
color: #000000;
-
font-size: 10px;
-
border: thin solid #333333;
-
}
-
.negro-bold {font-size: 11px; font-family: tahoma; color: #000000; font-weight: bold; }
-
-->
-
</></style>
-
</meta></head>div align="center">
-
-
<div style="display: none;" id="respuesta" class="negro"></div>
-
<div style="display: block;" id="newsletter">
-
a la industria audiovisual nuevos talentos en los campos de creación audiovisual
-
con tecnología.</p>
-
<p align="left" class="negro">Si eres músico, creador de efectos de vídeo y sonido, artista 3D, editor de vídeo o
-
motion graphics... este es tu sitio.</p>
-
<form id="form" method="post" action="insertar.php">
-
<input name="email" type="text" class="campo-texto" id="email" />
-
</input></label>
-
<label>nput name="enviar" type="submit" class="boton-negro" value="Infórmame cuando esté online*"/>
-
</label>
-
</form>
-
</div></td>
-
</tr>
-
</table>
-
-
-
</html>
Como podemos ver, hemos incluido un script llamado artesonico.js, este archivo es el que se encarga de hacer la petición AJAX y hacer visibles los distintos estados en la web.
-
function init() {
-
var form = $('form');
-
var divRespuesta = document.createElement('div');
-
form.addEventListener('submit', validarEmail, false);
-
divRespuesta.setAttribute('id','respuesta');
-
form.appendChild(divRespuesta);
-
reiniciar()
-
}
-
-
function insertar() {
-
$('uploading').style.display = 'block';
-
$('newsletter').style.display = 'none';
-
var form = $('form');
-
var consulta= form.email.value;
-
new ajax ('insertar.php', {postBody : 'email=' + consulta, update: $('respuesta'), onComplete: salida});
-
}
-
function salida() {
-
$('uploading').style.display = 'none';
-
$('respuesta').style.display = 'block';
-
}
-
function reiniciar(){
-
$('uploading').style.display = 'none';
-
$('newsletter').style.display = 'block';
-
$('respuesta').style.display = 'none';
-
}
-
function validarEmail(evt){
-
evt.preventDefault();
-
var form = $('form');
-
if (form.email.value == ""){
-
alert("Por favor ingrese su e-mail");
-
form.email.focus();
-
return;
-
}
-
if (form.email.value.indexOf('@', 0) == -1 || form.email.value.indexOf('.', 0) == -1){
-
alert("E-mail incorrecto");
-
form.email.value = "";
-
form.email.focus();
-
return;
-
}
-
insertar();
-
}
-
window.onload = init;
Observamos varias funciones. La primera de ella, init(), se encarga de inicializar y registrar los campos que vamos a utilizar. Prestamos especial atención a la linea 4, aquí lo que hacemos a crear un listener que escuchará los eventos de nuestro formulario para poder procesarlo mediante javascript. En este caso capturamos el evento submit y le pasamos la función validarEmail para que sea ejecutada cuando pulsemos en el botón enviar.
La función validarEmail() tiene como objetivo verificar que el correo introducido sea correcto, si todo va bien llamaremos a la función insertar(). Esta función es la llamada al AJAX y el centro de esta aplicación. Simplemente creamos una instancia de ajax con dos parámetros, el primero de ellos es el php que queremos ejecutar y el segundo es un objeto con los siguientes atributos:
postBody ->Variables que mandamos mediante post
update -> El objeto que actualizaremos
onComplete ->El manejador que será invocado una vez haya concluido la petición
En este caso hacemos que el manejador onComplete llame a salida() que se encargará de hacer visible e invisible los divs que veamos oportunos.
Pues ya que te veo puesto, a ver si le echas un ojo a mi librería pAjax, que es como un loadVars pero en javascript :). la URL es:
http://www.javascript.es/apis/pajax.htm
Saludos!
Muy bueno el tutorial, totalmente aplicable, pero lamentablemente no funciona con iexplorer (que raro .. no?)