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