Home>Guide>Come fare una richiesta HTTP in JavaScript

Come fare una richiesta HTTP in JavaScript




Le richieste HTTP gestiscono la comunicazione digitale tra diversi punti per richiedere o fornire dati. Un esempio molto utile sono le API, diffusissime ormai per lo scambio dati in ingresso e/o in uscita. Le richieste HTTP possono essere utilizzate con tantissimi linguaggi di programmazione, ma come si effettua una richiesta HTTP in JavaScript?

  • Leggi l'articolo, ti bastano solo 1 minuto, 13 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come disabilitare il cambio email nel profilo utente in WordPress


Vuoi rimuovere l’opzione di modifica email nella pagina di profilo in WordPress? Ecco come fare.

Come usare le regex in JavaScript


Hai bisogno di cercare o sostituire stringhe in testi più o meno lunghi? Scopri come fare con JavaScript.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)