> For the complete documentation index, see [llms.txt](https://checksound.gitbook.io/tecnologie5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://checksound.gitbook.io/tecnologie5/le-basi-di-http.md).

# Le basi di HTTP - HyperText Transfer Protocol

### HTTP (HyperText Transfer Protocol)

Questo primo articolo del blog parla di ciò che è alla base del funzionamento di Internet, e quindi di tutti i siti web: il protocollo HTTP.

Andremo ad analizzare **cos'è HTTP, il suo funzionamento e come visualizzare i messaggi HTTP** inviati tramite la rete.

### Cos'è HTTP <a href="#cose-http" id="cose-http"></a>

HTTP (Hypertext Transfer Protocol, letteralmente protocollo di trasferimento di un ipertesto) è un **linguaggio di testo** che consente la comunicazione tra client e server attraverso internet. Nell'istante in cui hai aperto questa pagina si è verificata la seguente conversazione tra il tuo browser (il client) e il server su cui è ospitata la risorsa `/tecnologie5/le-basi-di-http`

<figure><img src="/files/lkcfH7jQ2zpAAX1s5nH4" alt=""><figcaption></figcaption></figure>

Dunque ogni qualvolta visitiamo un sito internet, HTTP ci consente di visualizzare le risorse di quel sito.

### Come funziona HTTP: request e response <a href="#come-funziona-http" id="come-funziona-http"></a>

Dopo aver introdotto brevemente il protocollo HTTP adesso vediamo il suo funzionamento passo passo, analizzando come è fatta una richiesta HTTP e la successiva risposta da parte del server.

### Request: il client invia una richiesta <a href="#http-request" id="http-request"></a>

Ogni conversazione tra client e server sul web inizia con una richiesta, un messaggio di testo creato dal client in un formato speciale noto appunto come HTTP.

Una **richiesta HTTP** è composta dalle seguenti parti:

`[method] [URI] [version]`\
`[headers]`\
`[body]`

Tornando all'esempio precedente la richiesta tradotta in HTTP sarebbe qualcosa del genere

```http
GET /tecnologie5/le-basi-di-http HTTP/1.1
Host: checksound.gitbook.io
Accept: text/html
User-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64)
```

Questo semplice messaggio comunica tutto ciò che è necessario riguardo la risorsa che il client sta richiedendo.

La prima riga di una richiesta HTTP è la più importante e contiene due parti fondamentali:

1. il metodo HTTP (`GET`)
2. l'URI (`/tecnologie5/le-basi-di-http`)

L'**URI** è l'indirizzo o il percorso univoco che identifica la risorsa che il client desidera. Il **metodo HTTP** definisce ciò che il client vuole fare con la risorsa.

#### Request methods: metodi di una richiesta HTTP <a href="#http-request-methods" id="http-request-methods"></a>

I metodi HTTP definiscono i modi in cui il client può interagire con la risorsa. La tabella seguente mostra alcuni dei metodi utilizzati durante una richiesta HTTP.

| **Metodo** | **Descrizione**                                               |
| ---------- | ------------------------------------------------------------- |
| GET        | Recupera una risorsa dal server (ad es. visitando una pagina) |
| POST       | Invia una risorsa al server (ad. es compilando un modulo)     |
| DELETE     | Cancella una risorsa dal server (ad es. eliminando un file)   |
| PUT        | Memorizza una risorsa sul server (as es. caricando un file)   |
| HEAD       | Recupera solo l'header della risposta senza la risorsa        |

Esistono altri metodi definiti dalle specifiche del protocollo HTTP, ma molti di essi sono poco utilizzati o non supportati. In realtà, molti browser moderni supportano solo `GET` e `POST`.

#### Request headers: intestazioni di richiesta <a href="#http-request-headers" id="http-request-headers"></a>

Oltre alla prima riga, una richiesta HTTP contiene altre informazioni chiamate **intestazioni di richiesta** (request headers).

Le intestazioni forniscono molte informazioni supplementari come l'host dove si trova la risorsa (Host), i formati di risposta accettati dal client (Accept) e l'applicazione utilizzata dal client per effettuare la richiesta (User-Agent).

| **Intestazione** | **Descrizione**                                                                                                     |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| Host             | Specifica il server dove è ospitata la risorsa richiesta                                                            |
| Accept           | Specifica quali formati di file (i [MIME Type](https://en.wikipedia.org/wiki/Media_type)) sono accettati dal client |
| Accept-Language  | Indica quale lingua supporta il client                                                                              |
| Accept-Charset   | Indica il set di caratteri accettato dal client                                                                     |
| User-Agent       | Specifica quale applicazione sta effettuando la richiesta                                                           |

Per approfondire leggi [HTTP request headers](https://www.flaviobiscaldi.it/risorse/internet/http/request-headers)

### Response: il server restituisce una risposta <a href="#http-response" id="http-response"></a>

Il client invia la richiesta al server, quindi attende la risposta (response). L'obiettivo del server è quindi di interpretare la richiesta del client e restituire una risposta.

Una volta che il server ha ricevuto la richiesta, conosce esattamente la risorsa di cui il client ha bisogno (tramite l'URI) e ciò che il client vuole fare con quella risorsa (tramite il metodo).

Ad esempio, nel caso di una richiesta `GET`, il server prepara la risorsa e la restituisce in una **risposta HTTP**.

Come per la richiesta, una risposta HTTP è composta dalle seguenti parti:

`[version] [status code] [reason]`\
`[headers]`\
`[body]`

Tradotto in HTTP, la risposta inviata al browser sarà simile a questa

```http
HTTP/1.1 200 OK
Date: Wed, 08 Aug 2018 21:23:53 GMT
Connection: keep-alive, Keep-Alive
Content-Encoding: br
Server: Apache
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Protocollo HTTP: cos'è e come funziona passo passo</title>
    </head>
    <body>
        <p>Protocollo HTTP</p>
    </body>
</html>
```

La risposta HTTP contiene la risorsa richiesta (il contenuto HTML in questo caso), più altre importanti informazioni come il codice di stato della risposta.

#### Status Codes: codici di stato HTTP <a href="#response-status-codes" id="response-status-codes"></a>

Il **codice di stato** comunica il risultato della richiesta al client. In questo caso `200` indica che la richiesta è andata a buon fine.

Esistono diversi codici di stato che indicano il successo, un errore o che il client deve fare qualcosa (ad esempio reindirizzare l'utente a un'altra pagina).

La tabella mostra alcuni dei codici di stato più frequenti.

| **Codice**                | **Descrizione**                                                           |
| ------------------------- | ------------------------------------------------------------------------- |
| 200 OK                    | La richiesta è andata a buon fine                                         |
| 301 Moved Permanently     | La risorsa richiesta è stata spostata definitivamente ad un nuovo URI     |
| 404 Not Found             | La risorsa richiesta non è stata trovata                                  |
| 500 Internal Server Error | Errore generico causato di solito da una configurazione errata del server |

Per approfondire leggi [codici di stato HTTP](https://it.wikipedia.org/wiki/Codici_di_stato_HTTP)

#### Response headers: intestazioni di risposta <a href="#http-response-headers" id="http-response-headers"></a>

Come la richiesta, anche una risposta HTTP contiene informazioni aggiuntive note come **intestazioni di risposta HTTP** (response headers). Il corpo della stessa risorsa può essere restituito in più formati diversi come HTML o JSON e l'intestazione Content-Type utilizza tipi di MIME, come ad esempio text/html, per dire al client quale formato viene restituito.

| **Intestazione** | **Descrizione**                                     |
| ---------------- | --------------------------------------------------- |
| Content-Encoding | Tipo di codifica utilizzata sui dati dal server     |
| Content-Type     | Indica il MIME Type dei dati (Es. text/html)        |
| Date             | La data e l'orario in cui i dati sono stati inviati |
| Server           | Nome del server web utilizzato                      |

Per approfondire leggi [HTTP response headers](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Standard_response_fields)

### Come visualizzare request, response e HTTP headers <a href="#come-visualizzare-http" id="come-visualizzare-http"></a>

Ci sono diversi modi per **visualizzare e analizzare i messaggi del protocollo HTTP** scambiati durante una conversazione tra client e server.&#x20;

#### La DevTools di Chrome <a href="#chrome-devtools" id="chrome-devtools"></a>

Col browser di casa Google hai a disposizione la [DevTools](https://developers.google.com/web/tools/chrome-devtools/), uno strumento intregrato nel browser che aiuta lo sviluppatore nella diagnostica di un'applicazione web.

Puoi visualizzare la DevTools da **Opzioni -> Altri strumenti -> Strumenti per sviluppatori** o tramite scorciatoia da tastiera **Ctrl+Maiusc+C** (se usi Windows).

Una volta aperta la finestra posizionati nella tab "Network" e premi `F5`, quindi dalla colonna "Name" seleziona una risorsa qualunque e sulla destra verranno visualizzate le colonne Headers, Preview, etc... come mostrato in figura.

<figure><img src="/files/iv3dAZcH5GOWDuM0ozmq" alt=""><figcaption><p>DevTools</p></figcaption></figure>

### Riferimenti

{% embed url="<https://it.wikipedia.org/wiki/Hypertext_Transfer_Protocol>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP>" %}