Come fare una richiesta HTTP in JavaScript

Cos'è una richiesta HTTP?

Una richiesta HTTP consiste nella connessione tra un client (ad esempio un browser) e un server per richiedere una risorsa o per inviare dati.
In pratica il client invia un messaggio al server, il quale risponde a sua volta inviando ciò che il client ha richiesto, nel formato previsto dalla comunicazione.
In parole ancora più semplici, è il modo di dialogare tra due entità digitali, che possono essere considerate esattamente come due persone. Per fare un esempio: una persona (client) fa una domanda all’altra (il server), la quale fornisce la risposta alla domanda (i dati).
Semplice no?

Tipi di richieste HTTP

Esistono diversi tipi di richieste HTTP, in base allo specifico scopo da ottenere. I più comuni ed utilizzati sono:

• GET: il client richiede una specifica informazione al server, ad esempio per ricevere una pagina web
• HEAD: il client richiede solo informazioni di intestazione (una sorta di sommario), ad esempio per conoscere le dimensioni della risorsa da caricare
• POST: il client invia dei dati al server, ad esempio quando si compila un form di contatto su un sito web
• PUT: del tutto analogo a POST, solitamente utilizzato con lo scopo di aggiornare dati già esistenti
• DELETE: il client richiede la cancellazione di dati

Ma dopo la solita noiosa ma necessaria teoria, è ora di passare alla pratica non credi?

Le richieste HTTP in JavaScript

Le richieste HTTP per la comunicazione tra client e server possono essere gestite con molti linguaggi di pragrammazione, ma in questo articolo ci focalizzeremo su JavaScript.

Esistono diversi modi per effettuare una richiesta HTTP in JavaScript, ma il metodo più diffuso è l’utilizzo dell’oggetto XMLHttpRequest (XHR).

Ecco un esempio di come utilizzare l’oggetto XMLHttpRequest per effettuare una richiesta HTTP GET per recuperare i dati JSON da un server:

var xhr = nuovo XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/data.json', true);
xhr.onload = funzione() {
    if (this.status == 200) {
        var data = JSON.parse(this.response);
        console.log(dati);
    }
};
xhr.send();

Questo esempio effettua una richiesta GET per recuperare un file JSON dal server, quindi registra i dati nella console quando la richiesta è completa.

Puoi anche utilizzare l’oggetto XMLHttpRequest per effettuare richieste POST, inviare dati al server e altro ancora, usando i metodi precedentemente descritti.

Il metodo fetch()

In alternativa, puoi utilizzare la funzione fetch() per effettuare richieste HTTP, che fornisce un’interfaccia più semplice e il supporto per funzionalità moderne come Promises, davvero molto utile e che suggerisco di approfondire.

Ecco un esempio di come utilizzare la funzione fetch() per effettuare una richiesta HTTP GET:

fetch('http://www.example.com/data.json')
    .then(risposta => risposta.json())
    .then(dati => console.log(dati))
    .catch(errore => console.errore(errore));

Questo esempio effettua una richiesta GET per recuperare un file JSON dal server, quindi registra i dati nella console quando la richiesta è completa.

La funzione fetch() restituisce una “promise” (promessa) che si risolve con la risposta del server, quindi puoi utilizzare il metodo then() per specificare una funzione di callback da eseguire quando la promessa viene risolta.

Volendo banalizzare il concetto, sarebbe come dire “una volta che è stata mantenuta la tua promessa (fetch), esegui queste operazioni (then)“. Il metodo catch() è un metodo di fallback utile ad intercettare eventuali errori o eccezioni (promessa non mantenuta) e gestirli; nell’esempio, viene gestito un eventuale errore semplicemente scrivendolo in console, solo a scopo esemplificativo, ma puoi dare vita a scenari sicuramente più complessi e precisi!

Piccolo approfondimento offtopic: la console del browser

Che cos’è la console del browser di cui si è parlato nella guida?
Praticamente tutti i browser più comuni, mettono a disposizione dello sviluppatore la “console”, strumento essenziale che aiuta a scrivere e “debuggare” il proprio codice.
La console è un pannello che visualizza messaggi come ad esempio gli errori o avvisi di JavaScript.
Il comando console.log() utilizzato in precedenza serve appunto per scrivere qualcosa nella console, così da poterla visualizzare.
Ma come si accede alla console del browser?

Google Chrome
Windows: Ctrl + Maiusc + J
MacOs: Cmd + Alt + J

Mozilla Firefox
Windows: Ctrl + Shift + K
MacOs: Cmd + Alt + K

Safari
Windows: Ctrl + Shift + K
MacOs: Cmd + Alt + K