En esta oportunidad veremos como enviar e-mails haciendo uso de PHP + AJAX de manera sencilla y práctica.
Empezemos entonces diseñando nuestro formulario de envio de mails. Este formulario tendrá el nombre enviar_mail, y en el evento onsubmit colocaremos el nombre de la función enviarMail() de la cual hablaremos mas adelante. Además definiremos 3 campos: el destinatario, el remitente y el mensaje. Al final colocaremos una capa para mostrar el mensaje de enviado. A continuación el código:
index.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Enviar E-mail AJAX+PHP</title> <script language="JavaScript" type="text/javascript" src="ajax.js"></script> </head> <body> <form onsubmit="enviarMail(); return false" name="enviar_email" action=""> <p>E-mail de tu amigo</p> <p> <input size="30" type="text" name="email_destino" /> </p> <p>Tu nombre </p> <p> <input size="30" type="text" name="emisor" /> </p> <p>Mensaje a enviar</p> <p> <textarea name="mensaje" cols="45%" rows="2" ></textarea> </p> <p> <input type="submit" value="Enviar" /> </p> </form> <div id="resultado_mensaje" style="width:300px; height:30px; border:1px solid gray;">Resultado aqui.</div> </body> </html>
Bien, ahora definamos las funciones en javascript que realizarán la petición al servidor. Definamos: la función nuevoAjax(), la cual se encargará de crear el objeto XMLHttpRequest dependiendo del navegador web (es algo que hemos visto en artículos anteriores); ahora la funcion enviarMail(), de la cual hablamos antes, está se encargará de enviar las variables del formulario al script PHP envia_mail.php que realizará el proceso de enviar el mail; y finalmente escribiremos la función borrarCampos(), la cual borra los 3 campos cuando el mail ha sido enviado. El código queda así:
ajax.js
function nuevoAjax(){ var xmlhttp=false; try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function enviarMail(){ c = document.getElementById('resultado_mensaje'); //variable=documenet.nombre_del_form.nombre_del_control.value emis=document.enviar_email.emisor.value; dest=document.enviar_email.email_destino.value; men=document.enviar_email.mensaje.value; ajax=nuevoAjax(); c.innerHTML = '<p style="text-align:center;"><img src="esperando.gif"/></p>'; ajax.open("POST", "envia_mail.php",true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { c.innerHTML = ajax.responseText } borrarCampos() } ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("destinatario="+dest+"&emisor="+emis+"&mensaje="+men) } function borrarCampos(){ document.enviar_email.emisor.value=""; document.enviar_email.email_destino.value=""; document.enviar_email.mensaje.value=""; document.enviar_email.email_destino.focus(); }
Finalmente, codificamos el script PHP que realizara el envio del mail. Para ello recibimos todas las variables que la función javascript enviarMail() nos envió, y hacemos uso de la instrucción mail de PHP, cuyos parametros son: destinatario, tema, texto del mensaje e información adicional de cabecera. El código queda así:
envia_mail.php
<?php $emisor=$_POST['emisor']; $destinatario=$_POST['destinatario']; $mensaje=$_POST['mensaje']; //Estoy recibiendo el formulario, compongo el cuerpo $cuerpo = "<h1>Un mensaje para ti</h1>"; $cuerpo .= "<p>Tu amigo " . $emisor . ", te envia este mensaje.</p>"; $cuerpo .= "<p>Tu email: " . $destinatario . "</p>"; $cuerpo = $cuerpo.$mensaje; //mando el correo... mail($destinatario,"Mensaje de un amigo",$cuerpo,"MIME-Version: 1.0\nContent-type: text/html; charset=UTF-8\nFrom: ".$emisor." < http://www.miweb.com >"); //doy las gracias por el envio echo "<div style=\"background-color:green;color:white;padding:4px;text-align:center;\">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>"; ?>
Como verán, el desarrollo es relativamente sencillo y no requiere mucho código. Sin embargo se le puede agregar algunas características como: trabajar con cookies para evitar correos continuos, validar los correos antes de enviarlos, etc. Descargar el código.