Come fare una chiamata AJAX ( GET / POST )

Una chiamata AJAX è una tecnologia che permette di ottenere dati da un server senza dover ricaricare la pagina.
E’ l’acronimo di “Asynchronous JavaScript and XML”, ed è alla base dello sviluppo web moderno.

Nell’articolo mostrerò alcuni esempi di codice per effettuare una chiamata AJAX.

Indice

Come fare una chiamata AJAX con JavaScript (senza jQuery)

JQuery è una libreria JavaScript molto comoda, non sempre però è disponibile.
Esistono due modi per fare una chiamata AJAX con JavaScript “nativo”: XMLHttpRequest e Fetch API.

Testare gli esempi proposti

Puoi testare comodamente gli esempi proposti utilizzando la funzionalità “code snippet” del tuo browser, come descritto nel mio articolo “Eseguire codice JavaScript su qualunque pagina web”

Effettuare una chiamata AJAX con XMLHttpRequest

XMLHttpRequest è stato il primo metodo messo a disposizione degli sviluppatori per effettuare chiamate AJAX.

Nonostante il nome, XMLHttpRequest può essere usato per effettuare una chiamata HTTP per ottenere qualunque tipo di dato (Plain Text, XML, JSON, immagini, video, …).

Effettuare una chiamata GET con XMLHttpRequest

Il seguente codice mostra come fare una chiamata GET usando XMLHttpRequest.

var xhr = new XMLHttpRequest();
var url = "server-side.php";
var parametri = "?parametro1=valore1&parametro2=valore2";
xhr.open('GET', url + parametri);
// questa funzione verrà chiamata al cambio di stato della chiamata AJAX
xhr.onreadystatechange = function () {
	var DONE = 4; // stato 4 indica che la richiesta è stata effettuata.
	var OK = 200; // se la HTTP response ha stato 200 vuol dire che ha avuto successo.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // Questo è il corpo della risposta HTTP
		} else {
			console.log('Error: ' + xhr.status); // Lo stato della HTTP response.
		}
	}
};
// Invia la richiesta a server-side.php
xhr.send(null);

La richiesta creata da questo codice sarà simile alla seguente

Effettuare una chiamata POST con XMLHttpRequest

Il codice incluso qui sotto permette di effettuare una chiamata POST usando XMLHttpRequest.

var xhr = new XMLHttpRequest();
var url = "server-side.php";
var parametri = "parametro1=valore1&parametro2=valore2";
xhr.open('POST', url);
// imposto l'header per informare che stiamo facendo una richiesta POST application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// questa funzione verrà chiamata al cambio di stato della chiamata AJAX
xhr.onreadystatechange = function () {
	var DONE = 4; // stato 4 indica che la richiesta è stata effettuata.
	var OK = 200; // se la HTTP response ha stato 200 vuol dire che ha avuto successo.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // Questo è il corpo della risposta HTTP
		} else {
			console.log('Error: ' + xhr.status); // Lo stato della HTTP response.
		}
	}
};
// Invia la richiesta a server-side.php
xhr.send(parametri);

Lo snippet di codice precedente creerà una richiesta simile alla seguente

Effettuare chiamate AJAX con Fetch API

La Fetch API è uno standard più moderno e flessibile per la creazione di chiamate AJAX.
Essendo stata introdotta più recentemente, non è supportata dai browser datati, come Internet Explorer.

Effettuare una chiamata GET con Fetch API

Di seguito troverai il codice per fare una chiamata GET usando Fetch API.

fetch('/?parametro1=valore1&parametro2=valore2')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }
      // Examine the text in the response
      response.text().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Effettuare una chiamata POST con Fetch API

Il seguente codice mostra come fare una chiamata POST usando Fetch API.

fetch('/', {
    method: 'post',
    headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: "parametro1=valore1&parametro2=valore2"
  })
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }
      // Examine the text in the response
      response.text().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Come fare una chiamata AJAX con jQuery

Usando jQuery è possibile chiamate AJAX utilizzando una sintassi più concisa.
Nel seguito vedrai alcuni esempi pratici di chiamate GET / POST utilizzando jQuery.

Effettuare una chiamata GET con jQuery

Il seguente codice mostra un semplice esempio per effettuare una chiamata AJAX GET.

jQuery.ajax({
  method: "GET",
  url: "/",
  data: { parametro1: "valore1", parametro2: "valore2" },
  success: function(data, textStatus, jXHR) {
     console.log("funzione chiamata quando la chiamata ha successo (response 200)", data, textStatus, jXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
     console.log("funzione chiamata quando la chiamata fallisce", jqXHR, textStatus, errorThrown);  
  }
})

Effettuare una chiamata POST con jQuery

Il metodo per fare una chiamata AJAX POST usando jQuery è simile a quanto è necessario fare per eseguirne una di tipo GET.

jQuery.ajax({
  method: "POST",
  url: "/",
  data: { parametro1: "valore1", parametro2: "valore2" },
  success: function(data, textStatus, jXHR) {
     console.log("funzione chiamata quando la chiamata ha successo (response 200)", data, textStatus, jXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
     console.log("funzione chiamata quando la chiamata fallisce", jqXHR, textStatus, errorThrown);  
  }
})

Inviare un JSON con jQuery

Il codice per inviare un JSON tramite jQuery è molto simile a quello per effettuare una chiamata POST.

Di seguito è riportato un estratto di codice che permette di eseguire questa operazione:

jQuery.ajax({
  method: "POST",
  url: "/",
  data: JSON.stringify({ parametro1: "valore1", parametro2: "valore2" }),
  contentType: "application/json",
  success: function(data, textStatus, jXHR) {
     console.log("funzione chiamata quando la chiamata ha successo (response 200)", data, textStatus, jXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
     console.log("funzione chiamata quando la chiamata fallisce", jqXHR, textStatus, errorThrown);  
  }
});

Tale codice, se eseguito, produce una chiamata AJAX che, se analizzata tramite il Chrome Web Inspector, risulta essere come nell’immagine seguente.

Effettuare una chiamata AJAX con jQuery in WordPress

Solitamente, quando si usa jQuery, gli esempi che si trovano fanno uso della notazione “$”, quindi una chiamata AJAX ha una forma simile a

$.ajax({...})

Tuttavia quando si sviluppa del codice per un sito fatto usando WordPress, non è possibile usare questa notazione, poiché la libreria jQuery inclusa è in modalità noConflict.

Per questo motivo, gli esempi di chiamate AJAX jQuery inclusi in questa pagina fanno uso della notazione “jQuery”, invece di quella “$”.

Effettuare più tentativi di chiamate AJAX

Spesso è utile fare in modo che una chiamata AJAX che abbia ricevuto una risposta del backend non valida, sia automaticamente riprogrammata per un nuovo tentativo.

Questo può essere ottenuto con il seguente codice:

attemptsCounter = 0;
// limite di tentativi da effettuare
attemptsLimit = 2;
performAjaxCall = () => {
    attemptsCounter++;
    
    jQuery.ajax({
      method: "GET",
      url: "/un/indirizzo.com",
      data: { "dati": "da-mandare" },
      success: function(data, textStatus, jXHR) {
         // gestiamo i dati ricevuti
      },
      error: function(jqXHR, textStatus, errorThrown) {
         // gestiamo l'errore
         // se non abbiamo superato il limite di tentativi
         if (attemptsCounter < attemptsLimit) {
            // tra due secondi riproveremo ad effettuare la chiamata
            setTimeout(performAjaxCall, 2000);   
         } else {
            // abbiamo raggiunto il limite di tentativi disponibili 
            console.error(`limite di tentativi raggiunto: ${attemptsCounter}`);
         }
      }
    })
}
// effettuiamo la prima chiamata
performAjaxCall();

Di seguito, un’applicazione del codice posto qui sopra.
In particolare, verranno effettuati 4 chiamate AJAX, con un limite massimo di tentativi impostato a 4.

Le prime tre saranno fallimentari, la 4° avrà successo.

Nell’esempio qui sotto, invece, tutte e 4 le chiamate saranno fallimentari, facendo cessare i tentativi.

La gestione del tempo per i nuovi tentativi

Nell’esempio precedente, ogni nuovo tentativo è separato di 2 secondi dal precedente.

Esiste un altro approccio per calcolare il tempo in cui il nuovo tentativo sarà effettuato, basato sull’algoritmo di backoff esponenziale.

Questo algoritmo fa in modo che il momento in cui il prossimo tentativo sarà effettuato dipenda dal numero di tentativi già svolti.

// il tempo di attesa raddoppierà ad ogni tentativo effettuato
sleepTime = 2 ^ contatoreTentativi;

Questo approccio è utilizzato nell’esempio qui sotto.

Supporto ai browser obsoleti (Internet Explorer)

Se avessi tra i requisiti della tua applicazione il supporto a browser obsoleti, come Internet Explorer, ti consiglio di leggere il post riguardo a “Controllare il supporto dei browser per CSS e JavaScript“.

Approfondimenti – AJAX informatica

In questo blog sono disponibili numerosi articoli per approfondire concetti legati allo sviluppo di applicazioni web.

Ad esempio, puoi consultare le sezioni dedicate al web development, a JavaScript o al CSS.

Ecco alcuni articoli di queste sezioni:

Se volessi migliorare la conoscenza di JavaScript leggendo dei libri, qui puoi trovarne un vasto assortimento.

Conclusioni

In questo articolo ho elencato alcuni esempi pratici per effettuare chiamate AJAX in GET / POST.
Se si ha la necessità di supportare i browser obsoleti, consiglio di usare XMLHttpRequest, altrimenti è consigliabile utilizzare Fetch API.

Seguimi su