FORM, Query string, Documenti dinamici

Trovare esempi sensati e comprensibili nelle pagine web che usiamo quotidianamente è difficile perché tali pagine:

1. Usano moltissimo codice Javascript
2. Sono composte da molte risorse che non hanno nulla a che vedere con il FORM

Ho trovato alcuni esempi che potrebbero essere utili da questo punto di vista. Sono tutti esempi che seguono questo pattern:

1. Pagina URL-X contiene FORM
2. Dati inviati con GET URL-Y?query-string-con-dati-inseriti
3. Browser mostra URL-Y?query-string-con-dati-inseriti e documento "evidentemente" dinamico costruito sulla base dei dati inseriti nel FORM

Anche se i FORM sono "quasi sempre" costruiti con METHOD="POST" invece che con METHOD="GET", questi esempi sono effettivamente reali e, credo, istruttivi.

Il Meteo

1. Caricare il sito https://www.ilmeteo.it.
2. Aprire i Developer tools.
3. Posizionare il mouse nella search box. Clic tasto destro, ispeziona. Analizzare il codice HTML "intorno" alla posizione del mouse.

Si vede che, a parte il codice JavaScript "abbondante e complicato", la search box è un elemento HTML input con un attributo nome=citta. Si vede anche che quell'elemento HTML è all'interno di un elemento HTML form come questo:

<form ... action="https://www.ilmeteo.it/meteo/cerca" method="get" ...>

Adesso:

1. Selezionare "Network" nei developer tools
2. Scrivere il nome di una città nella search box (es. "Trieste")
3. Premere enter. Analizzare le prime due coppie request-response.

Si vede che la prima request è effettivamente quella che ci aspettiamo in base al valore dell'attributo action nel form, al valore dell'attributo name nella search box (elemento input) ed al dato inserito:

GET https://www.ilmeteo.it/meteo/cerca?citta=Trieste

La response è una redirection contenente uno header Location verso l'URL https://www.ilmeteo.it/meteo/Trieste.

La seconda request è inviata dal browser automaticamente verso quell'URL e poi viene mostrato un documento molto complesso ed "evidentemente dinamico" con le previsioni del tempo valide in quel momento per la città desiderata.

Sostituendo Trieste nella barra degli indirizzi del browser con il nome di un'altra città (es. Firenze) e premendo enter, viene mostrato un tab con le previsioni del tempo per Firenze ed URL https://www.ilmeteo.it/meteo/Firenze. Osservando il traffico dei developer tools si vede che non c'è stata nessuna redirection. Evidentemente, https://www.ilmeteo.it/meteo identifica il programma sul web server che genera il documento dinamico usando come input la terza parte dell'URL.

digonline

1. Caricare il sito https://www.digwebinterface.com/.
2. Clic tasto destro in una zona senza testo. View page source. Analizzare il codice HTML cercando gli elementi script e l'elemento form.

Si vede che, a parte il codice JavaScript "abbondante e complicato", il documento descrive essenzialmente un form in cui i vari elementi di input sono organizzati spazialmente in un elemento table non visible (ha attributo border=0).

Per vedere quali sono gli elementi html che corrispondono ai vari elementi di input del form visualizzato è sufficiente posizionare il mouse su uno degli elementi, clic tasto destro, ispeziona. Si vede che c'è una textarea, varie input type="checkbox" ed un menu drop-down (non visto a lezione) descritto da un elemento select.

I valori dell'attributo name per ogni elemento input (e per la textarea) determineranno il contenuto della query string inviata al web server al momento del clic su "Dig".

Posizionando il mouse sul bottone "Dig" ed ispezionando il codice html si vede che il bottone è un input type="submit": è il bottone che provoca l'invio dei dati al web server.

Gli aspetti salienti dell'elemento form sono:

<form ... action="/" method="get" ...>

L'invio dei dati quindi avverrà quindi con una GET verso l'URL https://www.digwebinterface.com/; i dati inseriti nel form saranno in una query string appesa in coda a quell'URL.

Ad esempio, effettuando una RR di tipo A per www.units.it e lasciando tutte le altre opzioni nella confifurazione di default, l'URL richiesto al web server (e visualizzato dal browser) sarà:

GET /?hostnames=www.units.it&type=A&ns=resolver&useresolver=8.8.4.4&nameservers=

Il traffico HTTP si può visualizzare selezionando "Network" nei developer tools. In questo caso il traffico è molto semplice e non c'è nessuna redirection.