En este tutorial vamos a ver un ejemplo básico de como crear un ajax usando javascript y php
1. Primero creamos un archivo en php que calculará la edad a partir de los datos que se reciban por POST
enviardatos.php
<?php
function calcular_edad($fecha,$FechaNacimiento)
{
/* Obtengo los datos de dia, mes y año por separado */
if (preg_match("/[0-9]{1,2}\/[0-9]{1,2}\/([0-9][0-9]){1,2}/",$fecha))
list($dia1,$mes1,$ano1)=split("/",$fecha);
if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$fecha))
list($dia1,$mes1,$ano1)=split("-",$fecha);
if (preg_match("/[0-9]{1,2}\/[0-9]{1,2}\/([0-9][0-9]){1,2}/",$FechaNacimiento))
list($dia2,$mes2,$ano2)=split("/",$FechaNacimiento);
if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$FechaNacimiento))
list($dia2,$mes2,$ano2)=split("-",$FechaNacimiento);
$dif = (mktime(0,0,0,$mes1,$dia1,$ano1) - mktime(0,0,0, $mes2,$dia2,$ano2));
/* convierto segundos en días */
$dif1 = $dif / (365 * 60 * 60 * 24);
/* obtengo el valor absoluto de los días quitando posibles signos negativos */
$dif1 = abs($dif1);
/* quito los decimales */
return floor($dif1);
}
//enviamos datos
$Fecha = date('d/m/Y');
echo 'Hola ' . $_POST['nombre'] . ' tienes en la actualidad: ' . calcular_edad($Fecha,$_POST['fnac']) . ' años';
?>
2. Ahora creamos un HTML con las funciones httpRequest y un formulario que enviará nombre y año de nacimiento, para solicitar la respuesta AJAX
ajax.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crear AJAX</title>
<script>
// creamos el objeto XmlHttpRequest
function httpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
console.log('No se puede crear objeto XmlHttpRequest.');
}
}
// creamos el ajax
ajax = function( ajustes ){
var msRequest = httpRequest();
var metodo = ajustes.metodo;
var data = ajustes.data + '&time='+ new Date().getTime();
var url = (metodo == 'GET') ? ajustes.url + '?' + data : ajustes.url;
msRequest.open(metodo, url, true);
if(typeof ajustes.contenidoTipo !== 'undefined') msRequest.setRequestHeader('Content-Type',ajustes.contenidoTipo);
msRequest.onreadystatechange = function(){
if (msRequest.readyState == 4 && msRequest.status == 200) {
ajustes.suceso(msRequest.responseText);
} else if ( msRequest.status == 200) {
ajustes.suceso(msRequest.responseText);
} else {
ajustes.suceso(msRequest.status);
}
};
if(metodo == 'GET') {
msRequest.send(null);
}else{
msRequest.send(data);
}
}
// funcion para mostrar resultados en DIV contenedor
function mostrarResultadosAjax(f){
ajax({
url: f.action,
metodo: f.method,
data: 'nombre='+f.nombre+'&fnac='+f.fnac,
contenidoTipo: 'application/x-www-form-urlencoded',
suceso: function(respuesta){
document.querySelector('#contenedor').innerHTML=respuesta;
}
});
}
</script>
</head>
<body>
<form method="post" action="enviardatos.php" onSubmit="mostrarResultadosAjax(this);return false;">
<div><input type="text" name="nombre" placeholder="Ingresa tu nombre"></div>
<div><input type="text" name="fnac" placeholder="Ingresa el año en que naciste"></div>
<div><button>Enviar</button></div>
</form>
<div id="contenedor"></div>
</body>
</html>
Comentarios
Publicar un comentario