RICHIESTE AJAX

PREREQUISITI

Per chi come me utilizza Visual Studio Code come editor, per eseguire gli esempi di codice riportati, occorre installare un web server locale. Io ho utilizzato l’estensione Live Server. Una volta installata per eseguire una richiesta AJAX fare click con il tasto destro sulla pagina HTML e caricare la pagina con il server installato.
Un esempio esegue una richiesta AJAX di tipo POST. I dati vengono inviati ad uno script PHP. Se hai seguito il mio corso sul PHP sai che per eseguire uno script in Windows occorre aver installato il web server Apache in ascolto sulla porta 80. Una volta installato il web server tramite XAMPP e dopo averlo avviato, posiziona lo script dentro la cartella htdocs. Maggiori informazioni le trovi nel mio post introduttivo sul PHP. Ti lascio il link: https://www.marcoalbasini.com/2022/07/introduzione-al-linguaggio-php/

CODICE SINCRONO E ASINCRONO

Il codice asincrono non è altro che codice che non va a bloccare l’esecuzione delle altre istruzioni di programma. Sappiamo che l’elemento fondamentale della rete internet è lo scambio dati fra host. Una strategia non intelligente sarebbe quella di fare in modo che questo scambio dati avvenga in modo sincrono, quindi bloccare il codice e mettersi in attesa della risposta. Una strategia migliore è quella di fare in modo di consentire al programma di effettuare la richiesta per poi continuare la sua esecuzione; quindi, non andiamo a bloccare l’esecuzione delle altre istruzioni in attesa della risposta. Questo modo di scrivere codice è chiamato programmazione asincrona.

INTRODUZIONE AD AJAX

Con AJAX (Asynchronous Javascript And Xml) possiamo fare richieste di rete in modo asincrono, recuperando informazioni da server esterni senza la necessità di ricaricare tutta la pagina. Anche se nell’acronimo abbiamo xml, in realtà Ajax può lavorare con file di testo e json, json che ha quasi del tutto sostituito l’xml come formato di scambio dati. L’oggetto XMLHttpRequest è il cuore di Ajax. Tramite questo oggetto possiamo effettuare le nostre richieste http di invio e ricezione dati. Vediamo ora con un esempio di codice come sia possibile leggere un file di testo in modo asincrono.

Copy to Clipboard

GESTIONE STATI RICHIESTA AJAX CON ONREADYSTATECHANGE

Una richiesta AJAX può assumere diversi stati. Per conoscere questi stati usiamo la proprietà readState. Facciamo un console.log(xhr) dove xhr è la costante che punta l’oggetto XMLHttpRequest; andiamo nell’oggetto prototype dove vediamo i vari stati che può assumere una richiesta AJAX. Riporto in basso l’immagine degli stati nel prototipo.

STATI DI UNA RICHIESTA AJAX

Lo stato 0 viene assunto quando è stata creata l’istanza XMLHttpRequest()
Stato 1 quando abbiamo invocato il metodo open
Lo stato 2 quando abbiamo ricevuto gli headers di risposta
Stato 3 quando i dati sono in fase di scaricamento
Infine stato 4 quando l’operazione è completata

Per gestire le varie transizioni fra gli stati usiamo l’evento onreadystatechange, facendo uno switch sulla proprietà readyState. Per quanto riguarda il completamento dell’operazione, prima di accedere alla risposta dobbiamo controllare che l’operazione sia andata a buon fine. Questo lo facciamo con un test sulla proprietà status che deve assumere il valore 200.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Stati della richiesta AJAX</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        const xhr = new XMLHttpRequest();
        //XMLHttpRequest
        xhr.onprogress = function() {
            console.log("onprogress (scaricamento)");
        }
       
        xhr.onreadystatechange = function(){
            switch(xhr.readyState){
                case 0:{
                    console.log('Istanza creata');break;
                }
                case 1:{
                    console.log('Invocato metodo open');break;
                }
                case 2:{
                    console.log('Ricevuto headers di riposta' + xhr.getAllResponseHeaders());break;
                }
                case 3:{
                    console.log('Dati in fase di scaricamento');break;
                }
                case 4:{
                    console.log('Operazione completata');break;
                }
               
            }   
        }
        console.log(xhr.readyState);//0
        xhr.open("GET", "../file1.txt",true);
        console.log(xhr.readyState);//1
        xhr.send();
        xhr.onload = function() {
            /*Per quanto riguarda il completamento dell'operazione
             dobbiamo anche controllare se l'operazione è andata a buon fine.
             lo facciamo con la proprietà status che deve assumere valore 200.*/
            if(xhr.status === 200){
                console.log(xhr.responseText);//Risposta
            }else if(xhr.status === 404){
                console.log("Risorsa non trovata");
            }else if(xhr.status === 500){
                console.log("Errore del server");
            }
        }
    </script>
</body>
</html>

AJAX E JSON

Creiamo un file JSON dove vengono descritti una serie di utenti. Così come abbiamo fatto per un file di testo, possiamo recuperare gli utenti tramite una richiesta AJAX che legge prima il file JSON in formato testuale poi lo trasforma in array javascript grazie al metodo parse. Il codice seguente illustra i passaggi.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>AJAX e JSON</title>
    <style>
        section{
            border: 1px solid #333;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button id="btn">Mostra Utenti</button>
    <section id="utentiSection"></section>
    <script type="rocketlazyloadscript">
        const btn = document.getElementById('btn');
        const sezione = document.getElementById('utentiSection');
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','../JSON/utenti.json',true);
            xhr.send();
            xhr.onload = function(){
                if(xhr.readyState == 4 && xhr.status === 200){
                    const utentiJSON = xhr.responseText;
                    /*--Dobbiamo trasformare la stringa JSON in array JS*/
                    const utenti = JSON.parse(utentiJSON);
                    showUtenti(utenti);
                }
            }

});
        function showUtenti(utenti){
            sezione.textContent = '';
            if(utenti.length > 0){
                utenti.forEach((utente, i) => {
                   showUtente(utente);
                });
            }else{
                sezione.textContent = 'Nessun utente da mostrare';
            }
        }
        function showUtente(utente){
            /*--VEDREMO L'OGGETTO DOCUMENT QUANDO PARLEREMO DEL DOM*/
            let newUserDiv = document.createElement('div');
            newUserDiv.style.border = "1px solid #999";
            newUserDiv.style.marginTop = "10px";
            newUserDiv.style.padding = "10px";
            newUserDiv.innerHTML = `
            nome: ${utente.nome} <br>
            anni: ${utente.anni} <br>
            lavoro: ${utente.lavoro} <br>
            `;
            sezione.appendChild(newUserDiv);
        }
    </script>
</body>
</html>

INVIARE RICHIESTE DI TIPO POST

Con AJAX possiamo fare richieste di tipo POST, in tal caso saremo noi a inviare dati al server o ad uno script. In questo esempio invieremo una username ad uno script PHP, test.php che ritornerà un messaggio. Prima di inviare la request dobbiamo aggiungere un header di richiesta, per farlo utilizziamo il metodo setRequestHeader.

xhr.setRequestHeader(“Content-type“,”application/x-www-form-urlencoded“);

quello che vogliamo inviare allo script test.php lo inseriamo nel metodo send() sotto forma di chiave-valore.

xhr.send(‘username=’ + username);

Riporto il codice HTML della richiesta e lo script PHP.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>AJAX RICHIESTE DI TIPO POST</title>
</head>
<body>
    <input type="text" id="username" placeholder="Invio">
    <script type="rocketlazyloadscript">
       //Recuperiamo l'elemento input
       const inp = document.getElementById('username');
       inp.addEventListener('keypress',function(e){
          /*Vogliamo che quando l'utente preme il tasto invio
          il testo nell'input sia passato ad uno script php.
          this.value è il testo nella casella di input.*/
          if(e.key === 'Enter'){invia(this.value);}
       });
       function invia(username){
            const xhr = new XMLHttpRequest();
            xhr.open('POST','http://localhost/test.php',true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send('username=' + username);
            xhr.onload = function(){
                if(xhr.status === 200 && xhr.readyState === 4){
                    console.log(xhr.responseText);
                }
            }
            
       }
    </script>
</body>
</html>

Copy to Clipboard

RECUPERARE DATI DA API ESTERNE

JSON placeholder è un REST API che possiamo utilizzare ogni volta che abbiamo bisogno di dati di esempio. URL https://jsonplaceholder.typicode.com/ Possiamo effettuare delle richieste ed avere in risposta dei dati in formato JSON. Vediamo un esempio di codice.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>AJAX E REST API</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        const xhr = new XMLHttpRequest();
        //RECUPERIAMO I POSTS
        xhr.open('GET','https://jsonplaceholder.typicode.com/posts',true);
        xhr.send();
        xhr.onload = function(){
            if(this.readyState === 4 && this.status === 200){
                //Convertiamo in Array JS
                const posts = JSON.parse(this.responseText);
                showPosts(posts);
            }
        }
        function showPosts(posts){
            posts.forEach((post,i) => {
                console.log(`${post.body} \n ${post.id}`);
                //RECUPERIAMO I COMMENTI
                const xhr = new XMLHttpRequest();
                xhr.open('GET',`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`,true);
                xhr.send();
                xhr.onload = function(){
                    if(this.readyState === 4 && this.status === 200){
                        //Convertiamo in Array JS
                        const comments = JSON.parse(this.responseText);
                        console.log(` Post: ${post.body} \n Post Id: ${post.id} \n`);
                        console.log('---------------------COMMENTI INIZIO-----------------------------');
                        comments.forEach((commento,i) => {
                            showComment(commento);
                        });
                        console.log('---------------------COMMENTI FINE-----------------------------');
                    }
                }
                
            });
        }
        //UTILIZZIAMO UN'ESPRESSIONE LAMBDA
        let showComment = commento => console.log(commento.body);
    </script>
</body>
</html>

AJAX E CALLBACK ASINCRONE

Creiamo un modulo httpRequest.js (i moduli li vedremo più avanti) per gestire richieste AJAX. In questo modo implementiamo astrazione e riutilizzo del codice. Se assegniamo il return this.responseText ad una variabile abbiamo undefined, cioè non riusciamo a recuperare il post 1. L’assegnamento è un’operazione sincrona mentre noi stiamo operando in modo asincrono, nel momento in cui definiamo la variabile non abbiamo il valore di ritorno della funzione. Qui entrano in gioco le callback asincrone, quello che possiamo fare è passare una callback alla funzione httpRequest, callback eseguita nel momento in cui abbiamo la risposta che viene passata come parametro alla callback stessa.

Copy to Clipboard

APPROFNDIMENTO AI

Le richieste AJAX (Asynchronous JavaScript and XML) sono un metodo utilizzato per eseguire richieste HTTP asincrone verso un server web, senza dover ricaricare la pagina. AJAX consente di aggiornare dinamicamente solo parte di una pagina, migliorando l’esperienza utente. Anche se il termine include “XML”, oggi le risposte sono più comunemente gestite in formati come JSON.

Ecco una descrizione dettagliata di come funzionano e come implementarle:

1. Creazione dell’oggetto XMLHttpRequest

La prima cosa da fare è creare un’istanza dell’oggetto XMLHttpRequest, che è il core delle richieste AJAX:

var xhr = new XMLHttpRequest();

2. Impostazione del tipo di richiesta

Per configurare la richiesta, si utilizza il metodo open(). Questo metodo prende tre parametri principali:

•Metodo: Il tipo di richiesta HTTP (GET, POST, PUT, etc.).

•URL: L’endpoint a cui inviare la richiesta.

•Asincrono: Se la richiesta deve essere asincrona (di solito true).

Esempio di una richiesta GET:

xhr.open(‘GET‘, ‘https://example.com/data‘, true);

3. Gestione della risposta

È importante definire una funzione di callback che gestirà la risposta del server. Questo può essere fatto tramite la proprietà onreadystatechange dell’oggetto XMLHttpRequest.

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Successo: la risposta è disponibile
console.log(xhr.responseText); // Ottenere il contenuto come stringa
var data = JSON.parse(xhr.responseText); // Se la risposta è in JSON
console.log(data); // Visualizza l’oggetto JSON
}else if (xhr.readyState === 4 && xhr.status !== 200) {
// Fallimento: gestire l’errore
console.error(‘Errore durante la richiesta AJAX‘);
}
};

Stati di readyState

•0: L’oggetto è stato creato ma non ancora aperto.

•1: La connessione è stata aperta.

•2: La richiesta è stata ricevuta dal server.

•3: La richiesta è in fase di elaborazione.

•4: La richiesta è completata, la risposta è pronta.

4. Invio della richiesta

Dopo aver configurato la richiesta, la invii utilizzando il metodo send():

xhr.send();

Per le richieste POST, è necessario inviare anche i dati. Ecco un esempio con una richiesta POST:

xhr.open(‘POST‘, ‘https://example.com/api‘, true);
xhr.setRequestHeader(‘Content-Type‘, ‘application/json‘);

// Creazione del payload JSON
var payload = JSON.stringify({ key: ‘value’ });

// Invio della richiesta con il payload
xhr.send(payload);

5. Impostazione degli Headers

Per inviare informazioni aggiuntive al server (come token di autenticazione o tipo di contenuto), si possono impostare gli headers HTTP con setRequestHeader():

xhr.setRequestHeader(‘Authorization‘, ‘Bearer YOUR_ACCESS_TOKEN‘);
xhr.setRequestHeader(‘Content-Type‘, ‘application/json‘);

6. Gestione degli errori

Le richieste AJAX possono fallire per diversi motivi, come problemi di connessione o errori del server. È possibile gestire gli errori verificando lo stato (status) della risposta:

xhr.onerror = function() {
console.error(‘Errore di rete o problema con la richiesta AJAX.‘);
};

Conclusione

AJAX è un potente strumento per migliorare l’interattività e l’efficienza delle applicazioni web, permettendo di caricare dati in modo asincrono e aggiornare solo parte della pagina senza il bisogno di ricaricarla completamente. Oggi, per semplificare le richieste asincrone, molti sviluppatori preferiscono usare la Fetch API o librerie come Axios rispetto all’uso diretto di XMLHttpRequest.

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB

PREREQUISITI

CODICE SINCRONO E ASINCRONO

INTRODUZIONE AD AJAX