Esplorando l’universo delle richieste HTTP con JavaScript: la guida definitiva per programmare con stile.
Scopri come cavalcare le onde del web con l’oggetto XMLHttpRequest e la nuova API fetch, e impara a dialogare con i server come un vero hacker del nuovo millennio. Abbandona le vecchie tecniche una volta per sempre, e lasciati cullare dalla potenza della programmazione moderna, dove ogni richiesta diventa un’esperienza emozionante e appagante per il tuo codice.
L’evoluzione della nostra capacità di interagire con i server utilizzando JavaScript è stata sorprendente. Grazie alla comunità di sviluppatori sempre più attiva, vengono introdotti nuovi strumenti per semplificare il processo. I metodi esposti in questo tutorial non si limitano solo all’interazione con i server remoti, ma possono essere applicati anche nella creazione di applicazioni web full-stack, interagendo con i propri server. Essi sono compatibili con numerose librerie e framework JavaScript.
In questo tutorial, andremo a vedere come effettuare richieste HTTP in JavaScript attraverso vari esempi e spiegazioni, mostrando come utilizzare i metodi integrati e librerie di terze parti per inviare richieste GET, POST, PUT/PATCH e DELETE.
HTTP request in Javascript: cosa sono e come funzionano
Prima di iniziare è bene riprendere un po’ di fondamentali.
In JavaScript, le richieste HTTP sono una serie di metodi predefiniti che ci permettono di interagire con i dati memorizzati sui server. Ogni richiesta include un endpoint e un tipo di richiesta che funge da gateway tra il client e il server. Il client, ovvero il programma che invia la richiesta, riceve una risposta dal server in base alla validità della richiesta inviata. In caso di successo, i dati vengono restituiti in formato XML o JSON (di solito JSON). In caso di fallimento, invece, il server invia un messaggio di errore. Il server comunica lo stato della risposta attraverso dei codici che ci aiutano a comprendere cosa sta cercando di dirci. Essi vanno da 100 a 199 per le risposte informative, da 200 a 299 per le richieste andate a buon fine, da 300 a 399 per i reindirizzamenti, da 400 a 499 per gli errori del cliente e da 500 a 599 per gli errori del server.
Nota: i seguenti esempi valgono per estensione per qualsiasi POST, PUT, GET, DELETE, PATCH: semplicemente basta sostituire a GET o POST la chiamata desiderata.
Richieste HTTP in JS usando XMLHttpRequest
XMLHttpRequest è un oggetto di JavaScript integrato nel browser per interagire con i server e caricare contenuti delle pagine web senza ricaricare il browser. In questa sezione, impareremo come utilizzare XMLHttpRequest per inviare richieste POST, GET, PUT/PATCH e DELETE. AJAX è la tecnologia per effettuare richieste HTTP in modo asincrono, il che significa che altre parti del codice JavaScript possono continuare a funzionare mentre si attende la risposta della richiesta.
Questa modalità rimane tra le più usate e comode, in quanto garantisce massima efficenza all’app ed evita di bloccarla inutilmente durante l’esecuzione. Inoltre, è possibile apportare modifiche a una sezione specifica della pagina senza dover ricaricare l’intera pagina, grazie all’uso di AJAX con XMLHttpRequest come oggetto predefinito.
Nota: DummyJson.com è il sito che permette di effettuare i test, in questa guida, e restituisce una JSON farlocca che potete usare per programmare quando non avete dati reali a disposizione.
Con questo codice carichiamo un nuovo oggetto XMLHttpRequest, facciamo una GET su una URL di prova, inviamo la richiesta; poi specifichiamo il tipo di risposta come JSON, e attendiamo il caricamento con la funzione onload. Se lo status è corretto e la chiamata è stata fatta, verrà stampata la JSON nella console, diversamente mostreremo l’errore che ci sta dando il server remoto.
Il metodo funziona sia con protocollo sicuro HTTPS che con HTTP tradizionale, a seconda di quello che supporta il server.
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://dummyjson.com/products/1");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};Il risultato sarà mostrato in questa forma nella console, come stringa JSON.
Ovviamente se volessimo fare una POST, in caso, basta sostituire nella seconda riga GET con POST, mentre la condizione può essere riscritta per riconoscere i vari tipi di codici di stato lato server.
Richieste HTTP in JS usando jQuery post (metodo consigliato)
Nulla in contrario all’uso di ssss, ma è un sistema lungo e per certi versi un po’ verboso; meglio sintetizzare, soprattutto in informatica.Cosa che possiamo fare con jQuery, che andremo adesso ad analizzare nello specifico. Per fare la stessa cosa usando jQuery – parliamo request HTTP in JS, lo ricordiamo – ovviamente dobbiamo includerlo, come prima cosa, nel markup della pagina, e poi eseguire qualcosa del genere:
const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
$.post("https://dummyjson.com/products/1", body, (data, status) => {
console.log(data);
});Nota: in alcuni siti la sintassi con $ potrebbe non funzionare, motivo per cui basterà sostituire nel codice tutte le occorrenze di $. con jQuery. in modo da risolvere l’ambiguità.
Nel blocco di codice precedente, abbiamo creato una scintillante gemma di dati da spedire al nostro server, e l’abbiamo conservata in una variabile chiamata “body“. Questa preziosa variabile è stata quindi offerta in sacrificio come secondo parametro al glorioso metodo $.post(). Mentre il messaggero portava il nostro prezioso carico al cospetto del server, abbiamo affidato il compito di ricevere la risposta a una funzione callback. E così, con la grazia divina della console, abbiamo finalmente registrato il risultato della nostra epica richiesta.
Richieste HTTP in JS usando jQuery / ajax
Con l’aiuto di $.ajax(), in alternativa, possiamo fare la stessa cosa ed ottenere lo stesso effetto.
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (result) {
console.log(result);
},
});
Credits: immagine di copertina generata da StarryAI.
