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>
<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;}
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;}
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);?>
$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);?>
No hay comentarios:
Publicar un comentario