Realizato da

Pubblicato il

javascript

http

get


come inviare richiesta GET a server o API dal browser con javascript client
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.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)