JavaScript Infinite Scroll: ecco come implementarlo in modo semplice

Pubblicato il 17 Maggio 2023

Nel post di oggi vediamo come implementare in JavaScript, in modo davvero semplice, la tecnica dell’Infinite Scroll per il caricamento asincrono dei dati da un database. Utilizzeremo le Fetch API e un file PHP per caricare i dati da un database MySQL.

Per prima cosa predisponiamo nella nostra pagina web un elemento con classe items (nel nostro caso un ul).

Inizializziamo le variabili start e limit per definire le opzioni di paginazione e, tramite i metodi onload e addEventListener (ovviamente richiamando l’evento scroll), eseguiamo il caricamento dei dati quando scrolliamo la pagina verso il basso.

InfiniteScroll.setStart(0);
InfiniteScroll.setLimit(12);

window.addEventListener('scroll', () => {

    if (window.scrollY == document.documentElement.scrollHeight - window.innerHeight) {

        InfiniteScroll.getItems();

    }

});

window.onload = function() {

    InfiniteScroll.getItems();

}

Di seguito il codice JavaScript che abbiamo utilizzato:


var InfiniteScroll = new function() {

    this.start = 0;
    this.limit = 12;
    this.endItems = false;

    var self = this;

    this.setStart = function (start) {
        self.start = start;
    };

    this.setLimit = function (limit) {
        self.limit = limit;
    };

    this.getItems = function () {
    
        if (self.endItems) {
            return;
        } 

        let params = new FormData();
        params.append('start', encodeURIComponent(self.start));
        params.append('limit', encodeURIComponent(self.limit));

        fetch('ajax.php', {
            method: 'post',
            body: params,
        }).then(function(response) {

            if (response.ok) {
                return response.json();
            } else {
                throw 'Server call error';
            }

        }).then(function(items) {

            if (items.reachedMax) {
                self.endItems = true;
            } else {

                var html = '';

                items.forEach(function(element) {
                    html += `<li class="list-group-item">${element.name}</li>`;
                });

                const current_items = document.querySelector(".items");
                current_items.innerHTML += html;
                self.start = parseInt(self.start) + parseInt(self.limit);

            }

        }).catch(function(error) {
            console.log(error);
        });

    };

}

Infine il codice PHP che, tramite PDO, esegue la connessione al database e la query per ottenere i dati:

try {

    $localhost = "localhost";
    $port = 8889;
    $dbname = "database";
    $user = "root";
    $password = "";

    $connexion = new PDO(
    "mysql:host=$localhost;port=$port;dbname=$dbname",
    $user,
    $password,
    array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")
    );

} catch (PDOException $e){
    echo $e->getMessage();
}

$start = trim(strip_tags(urldecode($_POST['start'])));
$limit = trim(strip_tags(urldecode($_POST['limit'])));

try {

$statement = $connexion->prepare(
    'SELECT *
    FROM table 
    ORDER BY name ASC 
    LIMIT '.(int)$start.','.(int)$limit
);

$statement->setFetchMode(PDO::FETCH_ASSOC);
$statement->execute();

$items = $statement->fetchAll();

if (is_array($items) && count($items) > 0) {
    echo(json_encode($items));
} else {
    echo(json_encode(array('reachedMax' => true)));
}

} catch (PDOException $e){
    exit(json_encode(array('error' => $e->getMessage())));
}

Con poco codice (possiamo ovviamente aggiungere opzioni ed estendere il codice) abbiamo implementato la tecnica più usata per il caricamento asincrono dei dati, particolarmente adatta per un’applicazione web che sarà fruita da mobile. Consiglio di valutare sempre, caso per caso, se può risultare più opportuno l’infinite scroll o la paginazione “classica” con i numeri di pagina ragionando in termini sia di risorse che di UX.