Ciao a tutti e benvenuti in questa piccola guida dove vi mostrerò come inviare una richiesta di tipo GET ad un server (API) usando codice JavaScript client side (browser).
In questa guida andiamo ad utilizzare una API che serve per il solo scopo di testare i propri programmi. Questa API si chiama JSONPlaceHolder. In basso troverete il codice per inviare una richiesta GET alla API per ricevere in risposta un oggetto JSON.
Come inviare richiesta GET usando JavaScript puro
Il metodo classico per inviare una richiesta GET dal client, è tramite l’utilizzo dell’oggetto XMLHttpRequest. Questo oggetto, una volta creato, ci permette di inviare vari tipi di richieste HTTP. In basso trovate il codice:var http = new XMLHttpRequest(); var url = "https://jsonplaceholder.typicode.com/todos/1" http.open("GET", url); http.send() http.onreadystatechange = (e) => {console.log(http.responseText) }
Come potete vedere, prima andiamo a creare una instance dell’oggetto XMLHttpRequest. Poi passiamo il tipo di richiesta “GET” e l’URL dell’endpoint della API o server al metodo open(). Infine dobbiamo specificare la funzione che verrà eseguita quando vi è un cambiamento nello stato della risposta del server. In questo caso andiamo a stampare in output il contenuto della risposta JSON.
Come inviare una richiesta GET con JavaScript e la fetch API
Un metodo molto più compatto per inviare una richiesta HTTP GET dal browser, è con l’utilizzo della JavaScript fetch API. Questa API ci permette di inviare richieste HTTP ad un server con pochissime linee di codice: In basso è mostrato il codice:var url = "https://jsonplaceholder.typicode.com/todos/1" fetch(url).then(response => response.json()).then(json => console.log(json))
Se eseguite questo codice nel vostro browser, vedrete in output nella console il file JSON inviato dalla API. Il codice è molto semplice: Usiamo la funzione fetch(), che è una funzione nativa a JavaScript, quindi non serve installare librerie aggiuntive. La fetch API fa uso delle JavaScript promises (Cosa sono le promise in JavaScript), possiamo quindi convertire l’output della risposta del server in JSON e stamparlo in console, usando il metodo then() della promise.
Come inviare una richiesta GET usando JQuery
Se state già usando JQuery nel vostro progetto, magari volete inviare una richiesta di tipo GET per motivi di compatibilità con il vostro codice. In basso è mostrato il codice JavaScript con JQuery per inviare una richiesta GET ad un server:var url = "https://jsonplaceholder.typicode.com/todos/1" $.ajax({url:url,type:"GET",success: function(result){console.log(result)},error: function(err){console.log(err);}})
Se eseguite questo codice nel vostro browser, vedrete in output l’oggetto JSON ritornato dalla API. Ci siamo! Abbiamo visto tre metodi efficaci per inviare una richiesta HTTP GET ad un server o API utilizzando codice JavaScript nel client.
