Primero empezaremos creando nuestro formulario para enviar nuestro Email
formulariomail.html
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Envio de Mail</title>
<script src="funcionAjax.js" language="javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- id=miformulario que utilizaremos en el archivofuncionAjax.js para referirnos a el -->
<form name="formulario" id="miformulario" method="post" action="enviarMail.php">
<table>
<tr>
<td colspan="2"style="text-align:center"><p>Enviar Mail de Prueba Php Usuando Ajax</p></td>
</tr>
<tr>
<td><p>Para quien:</p></td>
<td><input type="text" name="para"id="para"/></td>
</tr>
<tr>
<td><p>Remitente:</p></td>
<td><input type="text" name="remitente"id="remitente" value="mimail@ejemplomail.com"/></td>
</tr>
<tr>
<td><p>Cuerpo del Mensaje</p></td>
<td><textarea name="mensaje" col="10" rows="10"id="mensaje"> </textarea></td>
</tr>
<tr>
<td colspan="2"style="text-align:center">
<input type="submit" name="enviar" value="EnviarMail"/>
</td>
</tr>
</table>
</form>
<div id="resultados"></div>
</body>
</html>
Luego creamos nuestro archivo Ajax que sera el encargado de hacer el puente con el servidor
funcionAjax.js
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ref=document.getElementById('miformulario');
addEvent(ref,'submit',enviarDatosServidor,false);
}
function enviarDatosServidor(e)
{
if (window.event) window.event.returnValue=false; else if (e) e.preventDefault(); enviarFormularioServidor(); } function retornarDatos() { var cadena=''; var para=document.getElementById('para').value; var mensaje=document.getElementById('mensaje').value; var remitente=document.getElementById('remitente').value; cadena='para='+encodeURIComponent(para)+'&mensaje='+encodeURIComponent(mensaje) +'&remitente='+encodeURIComponent(remitente); return cadena; } var conexionServidor; function enviarFormularioServidor() { conexionServidor=crearXMLHttpRequest(); conexionServidor.onreadystatechange = procesarEventos; conexionServidor.open('POST','enviarMail.php', true); conexionServidor.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); conexionServidor.send(retornarDatos()); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexionServidor.readyState == 4) { resultados.innerHTML =conexionServidor.responseText; } else { resultados.innerHTML = 'Enviando...'; } } //*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }
if (window.event) window.event.returnValue=false; else if (e) e.preventDefault(); enviarFormularioServidor(); } function retornarDatos() { var cadena=''; var para=document.getElementById('para').value; var mensaje=document.getElementById('mensaje').value; var remitente=document.getElementById('remitente').value; cadena='para='+encodeURIComponent(para)+'&mensaje='+encodeURIComponent(mensaje) +'&remitente='+encodeURIComponent(remitente); return cadena; } var conexionServidor; function enviarFormularioServidor() { conexionServidor=crearXMLHttpRequest(); conexionServidor.onreadystatechange = procesarEventos; conexionServidor.open('POST','enviarMail.php', true); conexionServidor.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); conexionServidor.send(retornarDatos()); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexionServidor.readyState == 4) { resultados.innerHTML =conexionServidor.responseText; } else { resultados.innerHTML = 'Enviando...'; } } //*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }
Luego creamos nuestro archivo controlador Php que sera el encargado de Enviar el Mail
enviarMail.php
<?php
// recibimos las variables enviadas al servidor
$para = $_POST["para"];
$remitente = $_POST["remitente"];
$cuerpoMensaje = $_POST["mensaje"];
echo $para;
// subject
echo $titulo = 'Este es Un mensaje de Prueba de la Funcion Mail';
// message
echo $mensaje = "
<html>
<head>
<title>Este es Un mensaje de Prueba de la Funcion Mail</title>
</head>
<body>
<p>$cuerpoMensaje</p>
</body>
</html>
";
// Para enviar un correo HTML mail, la cabecera Content-type debe fijarse
$cabeceras = 'MIME-Version: 1.0' . "\r\n";
$cabeceras .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Cabeceras adicionales
$cabeceras .= "To: $para" . "\r\n";
$cabeceras .= "From: $remitente" . "\r\n";
//$cabeceras .= 'Cc: copiaoculta@ejemplocorreo.com' . "\r\n";//Copia
//$cabeceras .= 'Bcc: birthdaycheck@ejemplocorreo.com' . "\r\n";//Copia oculta
// Funcion Mail
echo mail($para, $titulo, $mensaje, $cabeceras);
?>
Listo probamos y nuestro mensaje sera enviado a nuestro remitente
