Un ejemplo del uso de AJAX en una página web puede ser el conocido como Scroll infinito (y lo que ello conlleva) que permite visualizar de forma interminable una serie de elementos: imágenes, vídeos, mensajes, ...
Para ello necesitamos JavaScript y el control de la posición donde se encuentre el usuario para "actualizar" los contenidos con más información.
Observa el siguiente ejemplo:
La carga inicial
Construyamos primero la estructura donde se localizará y mostrará la información. En este caso, al ser una información dinámica, no queremos que muestre información inicialmente. Deberá hacerlo sólo cuando cargue la página por primera vez (DOMContentLoaded):
| HTML |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Infinito</title>
<style>
#numbers-container {
padding:5px; /* Espacio alrededor del contenido */
text-align: center; /* Contenido centrado */
margin:auto; /* Centrado respecto a la ventana */
width:fit-content; /* Ancho de contenido ajustado */
line-height: 25px; /* Espacio entre cada div */
height: 100vh; /* Tamaño de la ventana de visualización: 100vh = 100% pantalla vertical */
overflow-y: scroll; /* Activar el desplazamiento vertical */
}
</style>
</head>
<body>
<!-- DIV que mostrará información del Scroll -->
<div id="info" style="display: flex;position: sticky;top:0;right:0;">GATOS: <span id="posicion"></span></div>
<!-- DIV que contendrá los números -->
<div id="numbers-container"></div>
<script src="script.js"></script>
</body>
</html>
|
| JavaScript |
document.addEventListener('DOMContentLoaded', function () {
// Inicialmente cargamos los primeros 10 números
cargaBloques(1, 10);
});
function cargaBloques(inicio, fin) {
// Creo el contenedor de la página
let contenedor = document.getElementById('contenedor');
for (let i = inicio; i <= fin; i++) {
let div = document.createElement('div'); // Creo DIV
div.id = i; // indico id
div.textContent = i; // Muestro el número de imagen
contenedor.appendChild(div); // Adjunto el DIV al contenedor de la página
div.appendChild(document.createElement('br')); // Adjunto un salto de línea
let img = document.createElement('img'); // Creo una imagen
img.src = "https://loremflickr.com/320/240?random=" + i; // Extraigo una imagen aleatoria
div.appendChild(img); // Adjunto la imagen al div
}
}
|
El desplazamiento
Para comprobar que se ha desplazado la pantalla, usaremos el "listener" del Scroll.
// Cuando el usuario se desplace, cargamos más números si es necesario
document.getElementById('contenedor').addEventListener('scroll', function () {
document.getElementById("posicion").innerText = (this.scrollTop + this.clientHeight) + ">=" + this.scrollHeight;
if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
// El usuario ha llegado al final de la página, cargamos más números
let ultimo = parseInt(this.children[this.children.length - 1].id) + 1;
cargaBloques(ultimo, ultimo + 9); // Cargamos 10 números más
}
});