Para poder programar con AJAX, necesitamos crear un objeto del tipo XMLHttpRequest, que va a ser el que nos permitirá realizar las peticiones en segundo plano al servidor web. Para ello primero crearás en la carpeta pública de tu servidor el archivo fecha.php que simplemente devuelve la fecha del servidor pasados 2 segundos. Su contenido sería el siguiente:
<?php
// retrasamos 2 segundos la ejecución de esta página PHP.
sleep(2);
// Mostramos la fecha y hora del servidor web.
echo "La fecha y hora del Servidor Web: ";
echo date("j/n/Y G:i:s.");
?>Ahora crearemos el siguiente archivo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWEC07 .- Ejemplo petición AJAX</title>
<script type="text/javascript">
let peticion;
const iniciar = () => {
peticion = new XMLHttpRequest();
peticion.open('GET', "http://localhost/fecha.php");
peticion.send();
peticion.addEventListener("load", cargada);
document.getElementById("estado").classList = [ 'cargando' ];
document.getElementById("estado").innerText = "Cargando...";
}
const cargada = () => {
document.getElementById("resultados").innerText = peticion.responseText;
document.getElementById("estado").classList = [ 'cargada' ];
document.getElementById("estado").innerText = "Cargada.";
}
window.addEventListener("load", iniciar, false);
</script>
<style>
#resultados {
background: yellow;
}
.cargando {
background: red;
}
.cargada {
background: green;
}
</style>
</head>
<body>
<p>
A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
</p>
<p>
Esta solicitud tardará 2 segundos aproximadamente, que es el tiempo de ejecución de la página PHP en el servidor
</p>
<p>
Contenedor resultados:
<div id="resultados"></div>
</p>
<p>
Estado de las solicitudes:
<div id="estado"></div>
</p>
</body>
</html>
Si abres esta archivo en tu navegador podrás comprobar que te muestra la página, te indica que está cargando la petición AJAX y que cuando ésta termina te muestra su resultado y te indica que ya ha se ha cargado. Te animo a que la pruebes.
Puedes observar que primero creamos un objeto XMLHttpRequest mediante su constructor. Mediante el método open indicamos la petición y mediante el método send la enviamos. Registramos el evento de la petición load que llamará a la función cargada cuando haya terminado la carga de nuestra petición. Luego mediante la propiedad responseText de la petición accedemos a la respuesta de dicha petición.