Hace apenas unos dias que me estoy metiendo al mundillo de AJAX, lo primero que hice con esta tecnología fué un formulario de contacto el cual creo un buen ejemplo para aprender/comprender el uso de Ajax...
Los archivos con que cuenta este ejemplo son:
* index.php
* objeto.js
* enviar.php
Lo primero en este momento será crear el documento principal "index.php" donde se creará el formulario y se hará la llamada al fichero con código JavaScript que se encarga de crear el objeto "XMLHTTP".
Código del fichero index.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enviar Correo - Ajax + PHP</title>
<script src="objeto.js" /></script>
<style type="text/css">
<!--
.main{
border:#999999 1px solid;
width:400px;
}
-->
</style>
</head>
<body>
<center>
<div id="main" class="main">
<form name="fcontacto">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="3">
<tr>
<td colspan="2"><h3>Formulario de Contacto </h3></td>
</tr>
<tr>
<td width="120" align="right" valign="top"> Nombre:</td>
<td><input type="text" name="nombre" /></td>
</tr>
<tr>
<td align="right" valign="top">Correo:</td>
<td><input type="text" name="correo" /></td>
</tr>
<tr>
<td align="right" valign="top"> Asunto:</td>
<td><input type="text" name="asunto" /></td>
</tr>
<tr>
<td align="right" valign="top"> Mensaje:</td>
<td><textarea name="mensaje" cols="25" rows="5"></textarea></td>
</tr>
<tr>
<td align="right"> </td>
<td>
<input type="button" name="enviar" value="Enviar" onclick="procesar()"/>
</td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
No creo necesario explicar el código anterior pues supongo que a estas alturas manejamos al menos lo básico del html ;)
Lo siguiente será crear el archivo "objeto.js", este archivo si merece un poco mas de explicación por lo cual lo dividiré en partes y al final mostraré el código completo, además de que al final del docuemento podrás encontrar todos los archivos disponibles para descargar -> [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip].
El siguiente paso será crear el las funciones Javascript necesarias para hacer la llamada y creación al objeto HMLHTTP:
Código del fichero objeto.js
Lo primero a hacer será declarar las variables que usaremos en nuestro script:
Código:
//Declaración de las variables a utilizar en el siguiente código
//[obj] contendrá el objeto XMLHTTP
var obj;
//[div] Almacenará el id del div en el que se
//mostrará el resultado obtenido de la carga del
var div;
//[pVars] La información contenida en el formulario
var pVars;
Teniendo las variables creadas pasamos a crear la función que nos creará el objeto XMLHTTP:
Código:
//Creación de la función [crearObjeto] en la que se encuentra
//el procedimiento necesario para crearlo.
function crearObjeto() {
//Navegadores distintos a IE (Opera, Mozilla ...)
if (window.XMLHttpRequest) {
//Retorna el valor contenida en este objeto.
return new XMLHttpRequest();
//Cuando el explorador es IE
} else if (window.ActiveXObject) {
//Retorna el valor contenido en este objeto
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
Ahora crearemos la función que procesará la información contenida en el formulario y la enviará al archivo "enviar.php" el cual se encargará de enviar el correo.
Código:
//La función [Procesar] se encargará de procesar (Valga la redundancia)
//la información contenida en el formulario y luego la envia
function procesar(){
//Proceso necesario para tomar el valor de los distintos
//campos del formulario para luego enviarlos.
pVars = '&nombre='+encodeURI(document.fcontacto.nombre.value);
pVars = pVars+ '&correo='+encodeURI(document.fcontacto.correo.value);
pVars = pVars+ '&asunto='+encodeURI(document.fcontacto.asunto.value);
pVars = pVars+ '&mensaje='+encodeURI(document.fcontacto.mensaje.value);
//Creación del objeto XMLHTTP
//Llamada a la función crearObjeto y tomando su valor de retorno.
obj=crearObjeto();
//asigna la función que se ejecutará cada vez que
//readyState cambie de valor
obj.onreadystatechange = cambio;
//Ahora indicamos el archivo al que serán enviado los datos y
//el método que será utilizado para el envio de la información
obj.open("POST",'enviar.php', true);
//Esto será necesario siempre que utilicemos el método "post"
//ya que la información deberá ser cidificada para el envio
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//Y por último solo envías las variables
obj.send(pVars);
}
Nota: Perdonen la indentación pero son líneas muy grandes y no caben en el espacio de la web. Pueden descargar los archivos para mejor visualización ;)
Lo siguiente será crear la función "cambio" la que es llamada por el objeto "onreadystatechange":
function cambio(){
//Asignamos el id de el div en el que se cargarán los datos
div = document.getElementById("main");
//Examina si "obj.readystate" sea igual a "4", lo cual indica que
//el documento está listo para la carga
if(obj.readyState == 4){
//luego agregamos la respuesta al div mediante "innetHTML"
div.innerHTML = obj.responseText;
//Si "obj.readystatechange" no es igual a "4"
} else {
//agrega la imagen "loading.gif" que se encuentra en el
//mismo directorio.
div.innerHTML='<img src="loading.gif" align="middle"/>;
}
}
Y por último, debemos crear el archivo "enviar.php" el cual recibirá los datos y los enviará a nuestro buzón de correo:
Código:
< ?php
if(@mail('correo@dominio.com', $_POST["asunto"], $_POST["mensaje"], "from:".$_POST["nombre"]."<".$_POST["correo"].">")){
echo'El Correo se ha enviado Correctamente!';
} else {
echo'Error!. el correo no se ha podido enviar';
}
?>
Pues bien, ahora puedes ver [http://dechiqui.com/ejemplos/correo_ajax_php/] el formulario funcionando o descargar [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip] los ficheros.
-------------
Documento Original: [http://dechiqui.com/blog/index.php?p=25&more=1]
Visualización y prueba: http://dechiqui.com/ejemplos/correo_ajax_php/]
Descarga de Archivos: [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip]
saludos.
