Chiamate HTTP GET, POST, PUT, PATCH e DELETE in JavaScript
Khurram Bashir
Khurram Bashir
Pubblicato il 22 dicembre 2023

Chiamate HTTP GET, POST, PUT, PATCH e DELETE in JavaScript

22 dicembre 2023
10 min
JavascriptHttpJSON

HTTP REQUEST

Le chiamate HTTP sono un modo per comunicare con un server web. Possono essere utilizzate per recuperare dati, creare, modificare o eliminare dati. In JavaScript, le chiamate HTTP possono essere eseguite utilizzando il modulo XMLHttpRequest, fetch, axios, jquery, ecc...

Chiamata HTTP GET

1const xhr = new XMLHttpRequest(); 2xhr.open("GET", "/api/users/1"); 3xhr.send();

Questa chiamata aprirà una richiesta HTTP GET al percorso specificato. Il metodo send() invierà la richiesta al server.

Il server risponderà alla richiesta con un codice di stato HTTP. I codici di stato HTTP sono numeri da 100 a 999 che indicano lo stato della richiesta. I codici di stato HTTP più comuni sono i seguenti:

  • 200 OK - La richiesta è stata completata con successo.
  • 400 Bad Request - La richiesta non è valida.
  • 401 Unauthorized - L'utente non è autorizzato ad accedere alla risorsa.
  • 403 Forbidden - L'utente è autorizzato ad accedere alla risorsa, ma non è autorizzato a eseguire l'azione richiesta.
  • 404 Not Found - La risorsa non è stata trovata.

Il server può anche rispondere alla richiesta con un corpo di risposta. Il corpo di risposta è un blocco di dati che può essere utilizzato per recuperare i dati richiesti.

Per recuperare i dati dal corpo di risposta, è possibile utilizzare il metodo responseText. Il metodo responseText restituirà il corpo di risposta come una stringa.

Ad esempio, la seguente chiamata HTTP GET recupererà i dati dal percorso /api/users/1:

1const xhr = new XMLHttpRequest(); 2xhr.open("GET", "/users/1"); 3xhr.send(); 4 5if (xhr.status === 200) { 6 const data = xhr.responseText; 7 // ... 8}

Chiamata HTTP POST

Una chiamata HTTP POST viene utilizzata per creare o modificare dati sul server. La sintassi per una chiamata HTTP POST è la seguente:

1const xhr = new XMLHttpRequest(); 2xhr.open("POST", "/path/to/resource"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({data: "value"}));

Questa chiamata aprirà una richiesta HTTP POST al percorso specificato. Il metodo setRequestHeader() imposta l'intestazione Content-Type della richiesta. L'intestazione Content-Type specifica il tipo di dati che vengono inviati al server. In questo caso, i dati vengono inviati come JSON.

Il metodo send() invierà la richiesta al server.

Il server risponderà alla richiesta con un codice di stato HTTP. I codici di stato HTTP sono gli stessi della chiamata HTTP GET.

Il server può anche rispondere alla richiesta con un corpo di risposta. Il corpo di risposta è un blocco di dati che può essere utilizzato per recuperare i dati creati o modificati.

Per recuperare i dati dal corpo di risposta, è possibile utilizzare il metodo responseText.

Ad esempio, la seguente chiamata HTTP POST creerà un nuovo utente Khurram Bashir sul server:

1const xhr = new XMLHttpRequest(); 2xhr.open("POST", "/users"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({ 5 name: "Khurram Bashir", 6 email: "developer@khurrambashir.com" 7})); 8 9if (xhr.status === 201) { 10 const data = xhr.responseText; 11 // ... 12}

Chiamata HTTP PUT

Una chiamata HTTP PUT viene utilizzata per modificare dati sul server. La sintassi per una chiamata HTTP PUT è la seguente:

1const xhr = new XMLHttpRequest(); 2xhr.open("PUT", "/path/to/resource"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({data: "value"}));

Questa chiamata aprirà una richiesta HTTP PUT al percorso specificato. Il metodo setRequestHeader() imposta l'intestazione Content-Type della richiesta. L'intestazione Content-Type specifica il tipo di dati che vengono inviati al server. In questo caso, i dati vengono inviati come JSON.

Il metodo send() invierà la richiesta al server.

Il server risponderà alla richiesta con un codice di stato HTTP. I codici di stato HTTP sono gli stessi della chiamata HTTP GET.

Il server può anche rispondere alla richiesta con un corpo di risposta. Il corpo di risposta è un blocco di dati che può essere utilizzato per recuperare i dati modificati.

Per recuperare i dati dal corpo di risposta, è possibile utilizzare il metodo responseText.

Ad esempio, la seguente chiamata HTTP PUT modificherà i dati dell'utente con l'ID 1:

1const xhr = new XMLHttpRequest(); 2xhr.open("PUT", "/users/1"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({ 5 name: "Khurram Bashir Administrator", 6 email: "admin@khurrambashir.com" 7})); 8 9if (xhr.status === 200) { 10 const data = xhr.responseText; 11 // ... 12}

Chiamata HTTP PATCH

Una chiamata HTTP PATCH viene utilizzata per modificare parzialmente dati sul server. La sintassi per una chiamata HTTP PATCH è la seguente:

1const xhr = new XMLHttpRequest(); 2xhr.open("PATCH", "/path/to/resource"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({ 5 data: "value" 6}));

Questa chiamata aprirà una richiesta HTTP PATCH al percorso specificato. Il metodo setRequestHeader() imposta l'intestazione Content-Type della richiesta. L'intestazione Content-Type specifica il tipo di dati che vengono inviati al server. In questo caso, i dati vengono inviati come JSON.

Il metodo send() invierà la richiesta al server.

Il server risponderà alla richiesta con un codice di stato HTTP. I codici di stato HTTP sono gli stessi della chiamata HTTP GET.

Il server può anche rispondere alla richiesta con un corpo di risposta. Il corpo di risposta è un blocco di dati che può essere utilizzato per recuperare i dati modificati.

Per recuperare i dati dal corpo di risposta, è possibile utilizzare il metodo responseText.

Ad esempio, la seguente chiamata HTTP PATCH modificherà solo il nome dell'utente con l'ID 1:

1const xhr = new XMLHttpRequest(); 2xhr.open("PATCH", "/users/1"); 3xhr.setRequestHeader("Content-Type", "application/json"); 4xhr.send(JSON.stringify({ 5 name: "John Doe" 6})); 7 8if (xhr.status === 200) { 9 const data = xhr.responseText; 10 // ... 11}

Chiamata HTTP DELETE

Una chiamata HTTP DELETE viene utilizzata per eliminare dati dal server. La sintassi per una chiamata HTTP DELETE è la seguente:

1const xhr = new XMLHttpRequest(); 2xhr.open("DELETE", "/path/to/resource"); 3xhr.send();

Questa chiamata aprirà una richiesta HTTP DELETE al percorso specificato. Il metodo send() invierà la richiesta al server.

Il server risponderà alla richiesta con un codice di stato HTTP. I codici di stato HTTP sono gli stessi della chiamata HTTP GET.

In alcuni casi, il server può anche rispondere alla richiesta con un corpo di risposta vuoto.

Ad esempio, la seguente chiamata HTTP DELETE eliminerà l'utente con l'ID 1:

1const xhr = new XMLHttpRequest(); 2xhr.open("DELETE", "/users/1"); 3xhr.send(); 4 5if (xhr.status === 200) { 6 // ... 7}

Conclusione

Le chiamate HTTP sono uno strumento essenziale per la comunicazione con i server web