2. Le basi della programmazione Web

Lo scopo principale di questo capitolo è quello di far scoprire i principi fondamentali della programmazione Web, che sono indipendenti dalla tecnologia specifica utilizzata per la loro implementazione. Presenta numerosi esempi che è consigliabile provare per "assimilare" gradualmente la filosofia dello sviluppo Web. Il lettore che possiede già queste conoscenze può passare direttamente al capitolo successivo.

I componenti di un’applicazione Web sono i seguenti:

Numero	Ruolo	Esempi comuni
1	OS Server	Unix, Linux, Windows
2	Server Web	Apache (Unix, Linux, Windows) IIS (Windows + piattaforma .NET) Node.js (Unix, Linux, Windows)
3	Codici eseguiti sul lato server. Possono essere eseguiti da moduli del server o da programmi esterni al server (CGI).	JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, Websphere, JBoss, Weblogic, ...) C#, VB.NET (IIS)
4	Database: può trovarsi sulla stessa macchina del programma che lo utilizza oppure su un'altra macchina tramite Internet.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows)
5	OS Client	Unix, Linux, Windows
6	Browser web	Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7	Script eseguiti sul lato client all'interno del browser. Questi script non hanno alcun accesso ai dischi del computer client.	JavaScript (su qualsiasi browser)

2.1. Scambio di dati in un'applicazione web con modulo

Numero	Ruolo
1	Il browser richiede per la prima volta un URL (http://machine/url). Non viene passato alcun parametro.
2	Il server Web gli invia la pagina Web corrispondente a URL. La pagina può essere statica oppure generata dinamicamente da uno script del server (SA) che potrebbe aver utilizzato i contenuti di un database (SB, SC). In questo caso, lo script rileverà che URL è stato richiesto senza il passaggio di parametri e genererà la pagina web iniziale. Il browser riceve la pagina e la visualizza (CA). Alcuni script lato browser (CB) potrebbero aver modificato la pagina iniziale inviata dal server. Successivamente, attraverso le interazioni tra l’utente (CD) e gli script (CB), la pagina web verrà modificata. In particolare, i moduli verranno compilati.
3	L’utente conferma i dati del modulo, che devono quindi essere inviati al server Web. Il browser richiede nuovamente la pagina iniziale URL o un’altra, a seconda dei casi, e trasmette contemporaneamente al server i valori del modulo. A tal fine può utilizzare due metodi denominati GET e POST. Alla ricezione della richiesta del client, il server avvia lo script (SA) associato all’URL richiesto, script che rileverà i parametri e li elaborerà.
4	Il server fornisce la pagina Web generata dal programma (SA, SB, SC). Questa fase è identica alla precedente fase 2. Gli scambi avvengono ora secondo le fasi 2 e 3.

2.2. Pagine web statiche, pagine web dinamiche

Una pagina statica è rappresentata da un file HTML. Una pagina dinamica è una pagina HTML generata «al volo» dal server Web.

2.2.1. Pagina statica HTML (HyperText Markup Language)

Realizziamo un primo progetto Web con Visual Studio Express 2012. Utilizziamo l’opzione [Fichier / Nouveau projet]:

in [1], si specifica che si desidera creare un'applicazione ASP.NET vuota;
in [2], il nome della soluzione Visual Studio. Tutti gli esempi di questo documento saranno nella stessa soluzione;
in [3], la cartella padre di quella del progetto che verrà creato;
in [4], il nome del progetto.

Confermiamo.

Il progetto risultante è riportato in [5]. Lo useremo per illustrare i principi fondamentali della programmazione web.

Iniziamo creando una pagina statica HTML:

in [1], clicca con il tasto destro del mouse sul progetto e segui le opzioni;

in [2], assegnare un nome alla pagina;
in [3], la pagina è stata aggiunta.

Il contenuto della pagina creata è il seguente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>

righe 2-10: il codice è delimitato dal tag radice <html>;
righe 3-6: il tag <head> delimita quella che viene chiamata l'intestazione della pagina;
righe 7-9: il tag <body> delimita quello che viene chiamato il corpo della pagina.

Modifichiamo questo codice nel modo seguente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

riga 5: definisce il titolo della pagina – verrà visualizzato come titolo della finestra del browser che mostra la pagina;
riga 8: un testo in caratteri grandi (<h1>).

Visualizziamo questa pagina in un browser:

in [1], si richiede la visualizzazione della pagina;
in [2], l'URL della pagina visualizzata;
in [3], il titolo della finestra – è stato fornito dal tag <title> della pagina;
in [4], il corpo della pagina – è stato fornito dal tag <h1>.

Diamo un'occhiata a [1], il codice HTML ricevuto dal browser:

in [2], il browser ha ricevuto la pagina HTML che avevamo creato. L'ha interpretata e ne ha ricavato una visualizzazione grafica.

2.2.2. Una pagina ASP.NET

Creiamo ora una pagina ASP.NET. Si tratta di una pagina HTML che può contenere codice eseguito sul lato server e che genera alcune parti della pagina. Seguiamo una procedura analoga a quella utilizzata per la creazione della pagina HTML:

in [1], viene richiamata una pagina ASP.NET da una [Web Form];

in [2], si assegna un nome alla nuova pagina;
in [3], la pagina è stata creata.

Il codice della pagina creata è il seguente:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Si ritrovano tag HTML già incontrati in precedenza. I tag che presentano l’attributo [runat= "server "] sono tag che verranno elaborati dal server e trasformati in tag HTML puri. Quindi ciò che vediamo sopra non è, come nel caso della pagina statica precedente, il codice HTML che verrà ricevuto dal browser. Si parla quindi di pagina dinamica: il flusso HTML inviato al server è generato da codice eseguito sul lato server. Modifichiamo la pagina come segue:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>

riga 8: si assegna un titolo alla pagina;
riga 13: visualizziamo del testo generato dal codice C#. Questo codice è racchiuso tra i tag <% %>. Il codice C# visualizza l'ora corrente nel formato ore:minuti:secondi.

Visualizziamo [1] questa pagina in un browser:

in [1], si richiede la visualizzazione della pagina;
in [2], l'URL della pagina visualizzata;
in [3], il titolo della finestra – è stato fornito dal tag <title> della pagina;
in [4], il corpo della pagina – è stato fornito dal tag <h1>.

Se si aggiorna la pagina (F5), si ottiene una visualizzazione diversa (nuova ora), mentre il valore URL rimane invariato. È questo l’aspetto dinamico della pagina: il suo contenuto può cambiare nel tempo. Esaminiamo ora il codice HTML ricevuto dal browser:

in [1], visualizziamo il codice sorgente della pagina;
in [2]: questa volta il codice HTML ricevuto non è quello che abbiamo creato noi, ma quello generato dal server web a partire dalle informazioni della nostra pagina ASP.NET.

2.2.3. Conclusione

Da quanto sopra esposto si evince la natura fondamentalmente diversa delle pagine dinamiche e statiche.

2.3. Script lato browser

Una pagina HTML può contenere script che verranno eseguiti dal browser. Il principale linguaggio di scripting lato browser è attualmente (settembre 2013) JavaScript. Sono state create centinaia di librerie con questo linguaggio per facilitare il lavoro dello sviluppatore.

Creiamo una nuova pagina HTML [1] nel progetto già creato:

Modifichiamo il file [HtmlPage2.html] con il seguente contenuto:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>

riga 13: definisce un pulsante (attributo type) con il testo "Cliccami" (attributo value). Quando si clicca su di esso, viene eseguita la funzione JavaScript [réagir] (attributo onclick);
righe 6-10: uno script JavaScript;
righe 7-9: la funzione [réagir];
riga 8: visualizza una finestra di dialogo con il messaggio [Vous avez cliqué sur le bouton].

Visualizziamo la pagina in un browser:

in [1], la pagina visualizzata;
in [2], la finestra di dialogo che appare quando si fa clic sul pulsante.

Quando si fa clic sul pulsante, non avviene alcuno scambio con il server. Il codice JavaScript viene eseguito dal browser.

Grazie alle numerose librerie JavaScript disponibili, è ormai possibile integrare vere e proprie applicazioni nel browser. Si tende quindi verso le seguenti architetture:

1-4: il server HTML è un server di pagine statiche HTML5 / CSS / JavaScript;
5-6: le pagine HTML5 / CSS / JavaScript fornite interagiscono direttamente con un server di dati. Quest’ultimo fornisce esclusivamente dati senza layout HTML. È il Javascript che li inserisce nelle pagine HTML già presenti nel browser.

In questa architettura, il codice JavaScript può diventare pesante. Si cerca quindi di strutturarlo a livelli, come si fa per il codice lato server:

il livello [UI] è quello che interagisce con l’utente;
il livello [DAO] interagisce con il server dei dati;
il livello [métier] raggruppa le procedure di business che non interagiscono né con l’utente né con il server di dati. Questo livello potrebbe non esistere.

2.4. Gli scambi client-server

Torniamo al nostro schema iniziale che illustrava gli attori di un’applicazione web:

Qui ci interessano gli scambi tra il computer client e il computer server. Questi avvengono attraverso una rete ed è bene ricordare la struttura generale degli scambi tra due computer remoti.

2.4.1. Il modello OSI

Il modello di rete aperta denominato OSI (Open Systems Interconnection Reference Model), definito dall’ISO (International Standards Organisation), descrive una rete ideale in cui la comunicazione tra i computer può essere rappresentata da un modello a sette livelli:

Ogni livello riceve servizi dal livello sottostante e fornisce i propri al livello superiore. Supponiamo che due applicazioni situate su macchine diverse, A e B, vogliano comunicare: lo fanno a livello del livello Application. Non hanno bisogno di conoscere tutti i dettagli del funzionamento della rete: ogni applicazione trasmette le informazioni che desidera inviare al livello sottostante, ovvero il livello Présentation. L’applicazione deve quindi conoscere solo le regole di interfaccia con il livello Présentation. Una volta che le informazioni si trovano nel livello Présentation, vengono trasferite secondo altre regole al livello Session e così via, fino a quando le informazioni non raggiungono il supporto fisico e vengono trasmesse fisicamente al computer di destinazione. A quel punto, subirà il processo inverso rispetto a quello a cui è stata sottoposta sul computer mittente.

Ad ogni livello, il processo mittente incaricato di inviare le informazioni le invia a un processo ricevente sull’altra macchina appartenente allo stesso livello. Lo fa secondo determinate regole che vengono definite protocollo di livello. Si ottiene quindi il seguente schema di comunicazione finale:

Il ruolo dei diversi livelli è il seguente:

Fisico	Garantisce la trasmissione di bit su un supporto fisico. In questo livello si trovano apparecchiature terminali per l’elaborazione dei dati (E.T.T.D.), quali terminali o computer, nonché apparecchiature di terminazione dei circuiti dati (E.T.C.D.), quali modulatori/demodulatori, multiplexer e concentratori. I punti di interesse a questo livello sono: la scelta della codifica delle informazioni (analogica o digitale) la scelta della modalità di trasmissione (sincrona o asincrona).
Collegamento dati	Nasconde le caratteristiche fisiche del livello fisico. Rileva e corregge gli errori di trasmissione.
Rete	Gestisce il percorso che devono seguire le informazioni inviate sulla rete. Questo processo è denominato routage: determinare il percorso che un’informazione deve seguire per arrivare al destinatario.
Trasporto	Consente la comunicazione tra due applicazioni, mentre i livelli precedenti permettevano solo la comunicazione tra macchine. Un servizio fornito da questo livello può essere il multiplexing: il livello di trasporto potrà utilizzare una stessa connessione di rete (da macchina a macchina) per trasmettere informazioni appartenenti a più applicazioni.
Sessione	In questo livello si trovano servizi che consentono a un’applicazione di aprire e mantenere una sessione di lavoro su una macchina remota.
Presentazione	Ha lo scopo di uniformare la rappresentazione dei dati sulle diverse macchine. Pertanto, i dati provenienti da una macchina A saranno "formattati" dal livello Présentation della macchina A, secondo un formato standard, prima di essere inviati sulla rete. Una volta giunti al livello Présentation del computer destinatario B, che li riconoscerà grazie al loro formato standard, verranno "confezionati" in modo diverso affinché l’applicazione del computer B possa riconoscerli.
Applicazione	A questo livello si trovano le applicazioni generalmente vicine all’utente, come la posta elettronica o il trasferimento di file.

2.4.2. Il modello TCP/IP

Il modello OSI è un modello ideale. La suite di protocolli TCP/IP si avvicina ad esso nella forma seguente:

l'interfaccia di rete (la scheda di rete del computer) svolge le funzioni dei livelli 1 e 2 del modello OSI
il livello IP (Internet Protocol) svolge le funzioni del livello 3 (rete)
il livello TCP (Protocollo di controllo del trasferimento) o UDP (Protocollo datagramma utente) svolge le funzioni del livello 4 (trasporto). Il protocollo TCP garantisce che i pacchetti di dati scambiati tra i dispositivi arrivino correttamente a destinazione. In caso contrario, rinvia i pacchetti che si sono smarriti. Il protocollo UDP non svolge questa funzione e spetta quindi allo sviluppatore di applicazioni occuparsene. Ecco perché su Internet, che non è una rete affidabile al 100%, è il protocollo TCP quello più utilizzato. Si parla quindi di rete TCP-IP.
Il livello Applicazione copre le funzioni dei livelli da 5 a 7 del modello OSI.

Le applicazioni Web si trovano nel livello Application e si basano quindi sui protocolli TCP-IP. I livelli Application dei client e del server si scambiano messaggi che vengono affidati ai livelli da 1 a 4 del modello per essere instradati a destinazione. Per comunicare tra loro, i livelli applicativi dei due sistemi devono «parlare» lo stesso linguaggio o protocollo. Quello delle applicazioni web si chiama HTTP (HyperText Transfer Protocol). Si tratta di un protocollo di tipo testuale, c.a.d, in cui i computer si scambiano righe di testo sulla rete per comunicare tra loro. Questi scambi sono standardizzati, ovvero il client dispone di una serie di messaggi per indicare esattamente ciò che desidera al server e quest’ultimo dispone a sua volta di una serie di messaggi per fornire la risposta al client. Questo scambio di messaggi ha la seguente forma:

Client --> Server

Quando il client invia la sua richiesta al server Web, invia

righe di testo nel formato HTTP per indicare ciò che desidera;
una riga vuota;
facoltativamente un documento.

Server --> Client

Quando il server risponde al cliente, invia

righe di testo nel formato HTTP per indicare ciò che sta inviando;
una riga vuota;
facoltativamente un documento.

Gli scambi hanno quindi la stessa struttura in entrambe le direzioni. In entrambi i casi, può avvenire l’invio di un documento, anche se è raro che un client invii un documento al server. Ma il protocollo HTTP lo prevede. È ciò che consente, ad esempio, agli abbonati di un provider di scaricare vari documenti sul proprio sito personale ospitato presso tale provider. I documenti scambiati possono essere di qualsiasi tipo. Prendiamo ad esempio un browser che richiede una pagina web contenente immagini:

il browser si connette al server Web e richiede la pagina desiderata. Le risorse richieste sono identificate in modo univoco tramite URL (Uniform Resource Locator). Il browser invia solo intestazioni HTTP e nessun documento.
Il server gli risponde. Innanzitutto invia delle intestazioni HTTP che indicano il tipo di risposta che sta inviando. Potrebbe trattarsi di un errore se la pagina richiesta non esiste. Se la pagina esiste, il server indicherà nelle intestazioni HTTP della sua risposta che, dopo di esse, invierà un documento HTML (HyperText Markup Language). Questo documento è costituito da una sequenza di righe di testo in formato HTML. Un testo HTML contiene tag (marcatori) che forniscono al browser indicazioni su come visualizzare il testo.
Il client, in base alle intestazioni HTTP del server, sa che riceverà un documento HTML. Lo analizzerà e forse si accorgerà che contiene riferimenti a immagini. Queste ultime non sono presenti nel documento HTML. Effettua quindi una nuova richiesta allo stesso server Web per richiedere la prima immagine di cui ha bisogno. Questa richiesta è identica a quella effettuata al punto 1, tranne per il fatto che la risorsa richiesta è diversa. Il server elaborerà questa richiesta inviando al cliente l’immagine richiesta. Questa volta, nella sua risposta, le intestazioni HTTP specificheranno che il documento inviato è un’immagine e non un documento HTML.
Il client recupera l’immagine inviata. I passaggi 3 e 4 verranno ripetuti fino a quando il client (in genere un browser) non avrà tutti i documenti necessari per visualizzare l’intera pagina.

2.4.3. Il protocollo HTTP

Scopriamo il protocollo HTTP attraverso alcuni esempi. Cosa si scambiano un browser e un server Web?

Il servizio Web o servizio HTTP è un servizio TCP-IP che solitamente opera sulla porta 80. Potrebbe operare su un’altra porta. In tal caso, il browser client sarebbe tenuto a specificare tale porta nella richiesta URL che invia. Una richiesta ha la seguente forma generale:

protocollo://macchina[:port]/percorso/informazioni

dove

protocollo	http per il servizio Web. Un browser può anche fungere da client per servizi ftp, news, telnet, ecc.
macchina	nome del computer su cui è in esecuzione il servizio Web
porta	porta del servizio Web. Se è 80, è possibile omettere il numero della porta. È il caso più frequente
percorso	percorso che indica la risorsa richiesta
informazioni	informazioni aggiuntive fornite al server per specificare la richiesta del client

Cosa fa un browser quando un utente richiede il caricamento di un URL?

apre una comunicazione TCP-IP con la macchina e la porta indicate nella sezione machine[:port] dell'URL. Aprire una comunicazione TCP-IP significa creare un «canale» di comunicazione tra due macchine. Una volta creato questo canale, tutte le informazioni scambiate tra le due macchine passeranno attraverso di esso. La creazione di questo canale TCP-IP non implica ancora il protocollo Web HTTP.
Una volta creato il canale TCP-IP, il client invierà la propria richiesta al server Web inviandogli righe di testo (comandi) nel formato HTTP. Invierà al server la parte relativa al percorso/alle informazioni del URL
il server risponderà allo stesso modo e nello stesso canale
uno dei due partner deciderà di chiudere il canale. Ciò dipende dal protocollo HTTP utilizzato. Con il protocollo HTTP 1.0, il server chiude la connessione dopo ciascuna delle sue risposte. Ciò obbliga un client che deve effettuare più richieste per ottenere i diversi documenti che costituiscono una pagina web ad aprire una nuova connessione per ogni richiesta, il che comporta un costo. Con il protocollo HTTP/1.1, il client può indicare al server di mantenere aperta la connessione fino a quando non gli verrà richiesto di chiuderla. Può quindi recuperare tutti i documenti di una pagina web con un’unica connessione e chiudere autonomamente la connessione una volta ottenuto l’ultimo documento. Il server rileverà tale chiusura e chiuderà a sua volta la connessione.

Per scoprire gli scambi tra un client e un server Web, utilizzeremo l’estensione [Advanced Rest Client] del browser Chrome che abbiamo installato nel paragrafo 1.3. Ci troveremo nella seguente situazione:

Il server Web potrà essere qualsiasi. In questa sede cerchiamo di scoprire gli scambi che avverranno tra il browser e il server Web. In precedenza, abbiamo creato la seguente pagina statica HTML:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

che visualizziamo in un browser:

Si nota che l’URL richiesto è: http://localhost:56376/HtmlPage1.html. Il server web è quindi localhost (=macchina locale) e la porta è 56376. Utilizziamo l’applicazione [Advanced Rest Client] per richiedere lo stesso URL:

in [1], si avvia l'applicazione (nella scheda [Applications] di una nuova scheda di Chrome);
in [2], si seleziona l'opzione [Request];
in [3], si specifica il server da interrogare: http://localhost:56376;
in [4], si specifica l'URL richiesta: /HtmlPage1.html;
in [5], si aggiungono eventuali parametri a URL. Nessuno in questo caso;
in [6], si specifica il comando HTTP utilizzato per la richiesta, in questo caso GET.

Si ottiene così la seguente query:

La richiesta così preparata, [7], viene inviata al server tramite [8]. La risposta ottenuta è quindi la seguente:

Abbiamo detto in precedenza che gli scambi client-server avevano la seguente forma:

in [1] si vedono le intestazioni HTTP inviate dal browser nella sua richiesta. Non aveva alcun documento da inviare;
in [2], si vedono le intestazioni HTTP inviate dal server in risposta. In [3], si vede il documento che ha inviato.

In [3] si riconosce la pagina statica HTML che abbiamo caricato sul server web.

Esaminiamo la richiesta HTTP del browser:

GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

la riga 1 non è stata visualizzata dall’applicazione;
riga 2: il browser si identifica con l'intestazione [User-Agent];
riga 3: il browser indica che invia al server un documento di testo (text/plain) nel formato UTF-8. In realtà, in questo caso il browser non ha inviato alcun documento;
riga 4: il browser indica che accetta qualsiasi tipo di documento in risposta;
riga 5: il browser specifica i formati di documento accettati;
riga 6: il browser specifica le lingue desiderate in ordine di preferenza.

Il server ha risposto inviando le seguenti intestazioni HTTP:

HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313

riga 1: non è stata visualizzata dall’applicazione;
riga 3: il server si identifica, in questo caso un server IIS di Microsoft;
riga 5: indica la tecnologia che ha generato la risposta, in questo caso ASP.NET;
riga 6: data e ora della risposta;
riga 7: la natura del documento inviato dal server. In questo caso, un documento HTML;
riga 12: la dimensione in byte del documento HTML inviato.

2.4.4. Conclusione

Abbiamo esaminato la struttura della richiesta di un client Web e quella della risposta fornita dal server Web attraverso alcuni esempi. Il dialogo avviene tramite il protocollo HTTP, un insieme di comandi in formato testo scambiati tra le due parti. La richiesta del client e la risposta del server hanno la seguente struttura comune:

I due comandi comunemente utilizzati per richiedere una risorsa sono GET e POST. Il comando GET non è accompagnato da un documento. Il comando POST, invece, è accompagnato da un documento che nella maggior parte dei casi è una stringa di caratteri che raggruppa tutti i valori inseriti nel modulo. Il comando HEAD consente di richiedere solo le intestazioni HTTP e non è accompagnato da alcun documento.

In risposta alla richiesta di un client, il server invia una risposta con la stessa struttura. La risorsa richiesta viene trasmessa nella parte [Document], a meno che il comando del client non fosse HEAD, nel qual caso vengono inviate solo le intestazioni HTTP.

2.5. Nozioni di base sul linguaggio HTML

Un browser Web può visualizzare diversi tipi di documenti, il più comune dei quali è il documento HTML (HyperText Markup Language). Si tratta di un testo formattato con tag della forma <balise>texte</balise>. Pertanto, il testo <B>important</B> visualizzerà il testo importante in grassetto. Esistono tag singoli come il tag <hr/> che visualizza una linea orizzontale. Non esamineremo i tag che si possono trovare in un testo HTML. Esistono numerosi software WYSIWYG che consentono di creare una pagina web senza scrivere una sola riga di codice HTML. Questi strumenti generano automaticamente il codice HTML di un layout realizzato con il mouse e controlli predefiniti. È quindi possibile inserire (con il mouse) una tabella nella pagina e poi consultare il codice HTML generato dal software per scoprire i tag da utilizzare per definire una tabella in una pagina web. Non è più complicato di così. Inoltre, la conoscenza del linguaggio HTML è indispensabile, poiché le applicazioni web dinamiche devono generare autonomamente il codice HTML da inviare ai client web. Questo codice viene generato dal programma e, ovviamente, è necessario sapere cosa generare affinché il client ottenga la pagina web desiderata.

In sintesi, non è affatto necessario conoscere l’intero linguaggio HTML per iniziare a programmare per il Web. Tuttavia, tale conoscenza è necessaria e può essere acquisita utilizzando software WYSIWYG per la creazione di pagine web, come DreamWeaver e decine di altri. Un altro modo per scoprire le sottigliezze del linguaggio HTML è navigare sul Web e visualizzare il codice sorgente delle pagine che presentano caratteristiche interessanti e ancora a voi sconosciute.

2.5.1. Un esempio

Consideriamo il seguente esempio che presenta alcuni elementi che si possono trovare in un documento web, quali:

una tabella;
un'immagine;
un link.

Un documento HTML ha la seguente struttura generale:

<html>
    <head>
        <title>Un titolo</title>
        ...
    </head>
    <attributi body>
        ...
    </body>
</html>

L'intero documento è racchiuso tra i tag <html>...</html>. È composto da due parti:

<head>...</head>: è la parte non visibile del documento. Fornisce informazioni al browser che visualizzerà il documento. Spesso contiene il tag <title>...</title>, che definisce il testo che verrà visualizzato nella barra del titolo del browser. Può contenere anche altri tag, in particolare quelli che definiscono le parole chiave del documento, parole chiave che verranno poi utilizzate dai motori di ricerca. In questa parte si possono trovare anche degli script, scritti per lo più in JavaScript o VBScript, che verranno eseguiti dal browser.

<body attributi>...</body>: è la parte che verrà visualizzata dal browser. I tag HTML contenuti in questa sezione indicano al browser l’aspetto visivo “desiderato” per il documento. Ogni browser interpreterà questi tag a modo suo. Due browser possono quindi visualizzare in modo diverso lo stesso documento web. Questo rappresenta solitamente uno dei grattacapi dei web designer.

Il codice HTML del nostro documento di esempio è il seguente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />

  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>

  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>

Elemento	tag ed esempi HTML
titolo del documento	<title>tag</title> (riga 5) il testo balises apparirà nella barra del titolo del browser che visualizzerà il documento
barra orizzontale	<hr/>: visualizza una linea orizzontale (riga 10)
tabella	<tabella attributi>....</table>: per definire la tabella (righe 12, 32) <thead>...</thead>: per definire le intestazioni delle colonne (righe 13, 19) <tbody>...</tbody>: per definire il contenuto della tabella (righe 20, 31) <tr attributi>...</tr>: per definire una riga (righe 21, 25) <td attributi>...</td>: per definire una cella (riga 22) esempi: <table border="1">...</table>: l'attributo border definisce lo spessore del bordo della tabella <td style="width: 150px; text-align: center;">cella(1,2)</td>: definisce una cella il cui contenuto sarà cella(1,2). Questo contenuto sarà centrato orizzontalmente (text-align: center). La cella avrà una larghezza di 150 pixel (width: 150px)
immagine	<img border="0" src="/images/cerisier.jpg"/> (riga 38): definisce un'immagine senza bordo (border="0") il cui file sorgente è /images/cerisier.jpg sul server Web (src="/images/cerisier.jpg"). Questo collegamento si trova in un documento Web generato con URL http://localhost:port/html/balises.htm. Pertanto, il browser richiederà l'URL http://localhost:port/images/cerisier.jpg per ottenere l'immagine qui indicata.
link	<a href="http://istia.univ-angers.fr">qui</a> (riga 42): fa sì che il testo ici funga da link verso l'URL http://istia.univ-angers.fr.
sfondo della pagina	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (riga 8): indica che l'immagine da utilizzare come sfondo della pagina si trova al percorso URL /images/standard.jpg sul server web. Nel contesto del nostro esempio, il browser richiederà l'URL http://localhost:port/images/standard.jpg per ottenere questa immagine di sfondo. Inoltre, il corpo del documento verrà visualizzato in un rettangolo di 400 pixel di altezza e 400 pixel di larghezza.

Da questo semplice esempio si evince che, per costruire l’intero documento, il browser deve effettuare tre richieste al server:

http://localhost:port/html/balises.htm per ottenere il codice sorgente HTML del documento
http://localhost:port/images/cerisier.jpg per ottenere l’immagine cerisier.jpg
http://localhost:port/images/standard.jpg per ottenere l’immagine di sfondo standard.jpg

2.5.2. Un modulo HTML

Il seguente esempio mostra un modulo:

Il codice HTML che genera questa visualizzazione è il seguente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

L'associazione tra controllo visivo e tag HTML è la seguente:

Controllo	tag HTML
modulo	<form method="post" action="...">
campo di immissione	<input type="text" name="txtSaisie" size="20" value="alcune parole" />
campo di immissione nascosto	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
campo di immissione multilinea	<textarea rows="2" name="areaSaisie" cols="20"> riga1 riga2 riga3 </textarea>
pulsanti di opzione	<input type="radio" value="Sì" name="R1" />Sì <input type="radio" name="R1" value="no" checked="checked" />No
caselle di selezione	<input type="checkbox" name="C1" value="uno" />1 <input type="checkbox" name="C2" value="due" checked="checked" />2 <input type="checkbox" name="C3" value="tre" />3
Menu a tendina	<select size="1" name="cmbValeurs"> <option value="1">opzione1</option> <option selected="selected" value="2">opzione 2</option> <option value="3">opzione 3</option> </select>
elenco a selezione singola	<select size="3" name="lst1"> <option selected="selected" value="1">lista1</option> <option value="2">lista2</option> <option value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
elenco a selezione multipla	<select size="3" name="lst2" multiple="multiple"> <option value="1">elenco1</option> <option value="2">elenco2</option> <option selected="selected" value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
pulsante di tipo submit	<input type="submit" value="Invia" name="cmdRenvoyer" />
pulsante di tipo reset	<input type="reset" value="Ripristina" name="cmdRétablir" />
pulsante di tipo button	<input type="button" value="Cancella" name="cmdEffacer" onclick="effacer()" />

Esaminiamo questi diversi tag:

2.5.2.1. Il modulo

modulo


<form method="post" action="FormulairePost.aspx">

tag HTML

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

attributi

name="frmexemple": nome del modulo

method="..." : metodo utilizzato dal browser per inviare al server Web i valori raccolti nel modulo

action="..." : URL a cui verranno inviati i valori raccolti nel modulo.

Un modulo Web è racchiuso tra i tag <form>...</form>. Il modulo può avere un nome (name="xx"). Questo vale per tutti i controlli presenti in un modulo. Lo scopo di un modulo è quello di raccogliere le informazioni fornite dall’utente tramite tastiera o mouse e di inviarle a un URL del server web. Quale? Quello indicato nell’attributo action="URL". Se questo attributo è assente, le informazioni verranno inviate al URL del documento in cui si trova il modulo. Un client Web può utilizzare due metodi diversi, denominati POST e GET, per inviare dati a un server Web. L’attributo method="méthode", con method uguale a GET o POST, del tag <form> indica al browser il metodo da utilizzare per inviare le informazioni raccolte nel modulo all'URL specificato dall'attributo action="URL". Quando l’attributo method non è specificato, viene utilizzato per impostazione predefinita il metodo GET.

2.5.2.2. I campi di immissione testo

campo di immissione

tag HTML

<input type="..." name="..." size=".." value=".."/>

Il tag `input` è disponibile per diversi controlli. È l'attributo type che permette di distinguere questi diversi controlli tra loro.

Attributi

type="text": specifica che si tratta di un campo di immissione

type="password": i caratteri presenti nel campo di immissione vengono sostituiti da asterischi (*). Questa è l'unica differenza rispetto al normale campo di immissione. Questo tipo di controllo è adatto per l'immissione delle password.

size="20": numero di caratteri visibili nel campo - non impedisce l'inserimento di un numero maggiore di caratteri

name="txtSaisie": nome del controllo

value="alcune parole": testo che verrà visualizzato nel campo di immissione.

2.5.2.3. I campi di immissione multilinea

campo di immissione multilinea

riga1

riga 2

riga 3

</textarea>

tag HTML	<textarea ...>testo</textarea> visualizza un campo di immissione multilinea con il testo iniziale al suo interno
attributi	rows="2": numero di righe cols="'20" : numero di colonne name="areaSaisie": nome del controllo

2.5.2.4. I pulsanti di opzione

pulsanti di opzione

<input type="radio" value="Sì" name="R1" />Sì

<input type="radio" name="R1" value="no" checked="checked" />No

tag HTML

<input type="radio" attributo2="valore2" ..../>testo

visualizza un pulsante di opzione con del testo accanto.

attributi

name="radio": nome del controllo. I pulsanti di opzione con lo stesso nome formano un gruppo di pulsanti mutuamente esclusivi: è possibile selezionare solo uno di essi.

value="valore": valore assegnato al pulsante radio. Non bisogna confondere questo valore con il testo visualizzato accanto al pulsante radio. Quest'ultimo è destinato esclusivamente alla visualizzazione.

checked="checked": se questa parola chiave è presente, il pulsante di opzione è selezionato, altrimenti non lo è.

2.5.2.5. Le caselle di controllo

caselle di controllo

<input type="checkbox" name="C1" value="uno" />1

<input type="checkbox" name="C2" value="due" checked="checked" />2

<input type="checkbox" name="C3" value="tre" />3

tag HTML

<input type="checkbox" attributo2="valore2" ....>testo

visualizza una casella di controllo con del testo accanto.

attributi

name="C1": nome del controllo. Le caselle di selezione possono avere o meno lo stesso nome. Le caselle con lo stesso nome formano un gruppo di caselle associate.

value="valore": valore assegnato alla casella di controllo. Non bisogna confondere questo valore con il testo visualizzato accanto al pulsante di opzione. Quest'ultimo è destinato esclusivamente alla visualizzazione.

checked="checked": se questa parola chiave è presente, la casella di selezione è selezionata, altrimenti non lo è.

2.5.2.6. L'elenco a discesa (combo)

Combo

<option value="1">scelta1</option>

<option selected="selected" value="2">scelta2</option>

<option value="3">opzione 3</option>

</select>

tag HTML

<select size=".." name="..">

<option [selected="selected"] value=”v”>...</option>

...

</select>

visualizza in un elenco i testi compresi tra i tag <option>...</option>

attributi

name="cmbValeurs": nome del controllo.

size="1": numero di elementi dell'elenco visibili. size="1" rende l'elenco equivalente a una casella combinata.

selected="selected": se questa parola chiave è presente per un elemento dell'elenco, quest'ultimo appare selezionato nell'elenco. Nel nostro esempio sopra riportato, l'elemento dell'elenco choix2 appare come l'elemento selezionato della casella combinata quando questa viene visualizzata per la prima volta.

value=”v”: se l’elemento viene selezionato dall’utente, è questo valore ([v]) che viene inviato al server. In assenza di questo attributo, è il testo visualizzato e selezionato che viene inviato al server.

2.5.2.7. Elenco a selezione singola

elenco a selezione singola

<option selected="selected" value="1">lista1</option>

<option value="2">lista2</option>

<option value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

tag HTML	<select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> visualizza in un elenco i testi compresi tra i tag <option>...</option>
attributi	gli stessi dell'elenco a discesa che visualizza un solo elemento. Questo controllo differisce dall'elenco a discesa precedente solo per l'attributo size>1.

2.5.2.8. Elenco a selezione multipla

elenco a selezione singola

<option value="1" selected="selected">lista1</option>

<option value="2">lista2</option>

<option selected="selected" value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

tag HTML	<select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> visualizza in un elenco i testi compresi tra i tag <option>...</option>
attributi	multiple: consente la selezione di più elementi nell'elenco. Nell'esempio sopra riportato, gli elementi liste1 e liste3 sono entrambi selezionati.

2.5.2.9. Pulsante di tipo button

pulsante di tipo button

tag HTML

<input type="button" value="..." name="..." onclick="effacer()" ..../>

attributi

type="button": definisce un controllo pulsante. Esistono altri due tipi di pulsante: submit e reset.

value="Cancella": il testo visualizzato sul pulsante

onclick="funzione()": consente di definire una funzione da eseguire quando l'utente fa clic sul pulsante. Questa funzione fa parte degli script definiti nel documento Web visualizzato. La sintassi precedente è una sintassi javascript. Se gli script sono scritti in VBScript, occorre scrivere onclick="funzione" senza le parentesi. La sintassi rimane identica se è necessario passare dei parametri alla funzione: onclick="funzione(val1, val2,...)"

Nel nostro esempio, un clic sul pulsante Effacer richiama la seguente funzione JavaScript effacer:

function cancella() {

alert("Hai cliccato sul pulsante Cancella");

}

</script>

La funzione effacer visualizza un messaggio:

2.5.2.10. Pulsante di tipo submit

pulsante di tipo submit

tag HTML	<input type="submit" value="Invia" name="cmdRenvoyer" />
attributi	type="submit": definisce il pulsante come pulsante di invio dei dati del modulo al server web. Quando l'utente fa clic su questo pulsante, il browser invia i dati del modulo all'URL URL definito nell'attributo action del tag <form> secondo il metodo definito dall'attributo method dello stesso tag. value="Invia": il testo visualizzato sul pulsante

2.5.2.11. Pulsante di tipo reset

pulsante di tipo reset

tag HTML	<input type="reset" value="Ripristina" name="cmdRétablir"/>
attributi	type="reset": definisce il pulsante come pulsante di ripristino del modulo. Quando l'utente fa clic su questo pulsante, il browser riporta il modulo allo stato in cui lo ha ricevuto. value="Ripristina": il testo visualizzato sul pulsante

2.5.2.12. Campo nascosto

campo nascosto

tag HTML

<input type="hidden" name="..." value="..."/>

attributi

type="hidden": specifica che si tratta di un campo nascosto. Un campo nascosto fa parte del modulo ma non viene mostrato all'utente. Tuttavia, se l'utente richiedesse al proprio browser di visualizzare il codice sorgente, vedrebbe la presenza del tag <input type="hidden" value="..."> e quindi il valore del campo nascosto.

value="unValore": valore del campo nascosto.

A cosa serve il campo nascosto? Può consentire al server Web di conservare informazioni nel corso delle richieste di un cliente. Consideriamo un'applicazione di acquisti online. Il cliente acquista un primo articolo art1 in quantità q1 su una prima pagina di un catalogo, quindi passa a una nuova pagina del catalogo. Per ricordare che il cliente ha acquistato q1 articoli art1, il server può inserire queste due informazioni in un campo nascosto del modulo web della nuova pagina. In questa nuova pagina, il cliente acquista gli articoli q2 e art2. Quando i dati di questo secondo modulo verranno inviati al server (submit), quest’ultimo riceverà non solo le informazioni (q2,art2), ma anche (q1,art1), che fa anch’esse parte del modulo in quanto campi nascosti. Il server Web inserirà quindi in un nuovo campo nascosto le informazioni (q1,art1) e (q2,art2) e invierà una nuova pagina del catalogo. E così via.

2.5.3. Invio dei valori di un modulo a un server Web da parte di un client Web

Nella lezione precedente abbiamo visto che il client Web dispone di due metodi per inviare a un server Web i valori di un modulo che ha visualizzato: i metodi GET e POST. Vediamo con un esempio la differenza tra i due metodi.

2.5.3.1. Metodo GET

Facciamo un primo test: nel codice HTML del documento, il tag <form> è definito come segue:


<form method="get" action="FormulaireGet.aspx">

Quando l’utente cliccherà sul pulsante [1], i valori inseriti nel modulo verranno inviati alla pagina ASP.NET [2]. Quest’ultima non esegue alcuna operazione con questi parametri e restituisce una pagina vuota. Vogliamo solo sapere in che modo il browser trasmette i valori inseriti al server web. A tal fine, utilizzeremo uno strumento di debug disponibile in Chrome. Lo si attiva digitando CTRL-I (maiuscolo) [3]:

Poiché ci interessano gli scambi di rete tra il browser e il server web, attiviamo la scheda [Network] sopra riportata, quindi facciamo clic sul pulsante [Envoyer] del modulo. Si tratta di un pulsante di tipo [submit] all’interno di un tag [form]. Il browser reagisce al clic richiedendo l’URL [FormulaireGet.aspx] indicato nell’attributo [action] del tag [form], con il metodo GET specificato nell’attributo [method]. Otteniamo quindi le seguenti informazioni:

La schermata sopra riportata mostra l’URL richiesto dal browser dopo aver cliccato sul pulsante [envoyer]. Richiede effettivamente l’URL previsto [FormulaireGet.aspx], ma alla fine aggiunge delle informazioni che corrispondono ai valori inseriti nel modulo. Per avere maggiori informazioni, clicchiamo sul link sopra riportato:

Sopra [1, 2], vediamo le intestazioni HTTP inviate dal browser. Qui sono state formattate. Per visualizzare il testo in chiaro di queste intestazioni, seguiamo il link [view source] [3, 4]. Il testo completo è il seguente:

GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Ritroviamo elementi già incontrati in precedenza. Altri compaiono per la prima volta:

Connection: keep-alive	il client chiede al server di non chiudere la connessione dopo la sua risposta. Ciò gli consentirà di utilizzare la stessa connessione per una richiesta successiva. La connessione non rimane aperta a tempo indeterminato. Il server la chiuderà dopo un periodo di inattività troppo lungo.
Referer	l'URL URL che era visualizzato nel browser quando è stata effettuata la nuova richiesta.

La novità è la riga 1 nelle informazioni che seguono il codice URL. Si nota che le scelte effettuate nel modulo si ritrovano nel codice URL. I valori inseriti dall’utente nel modulo sono stati passati nel comando GET URL?param1=valore1&param2=valore2&... HTTP/1.1 dove i parami sono i nomi (attributo name) dei controlli del modulo web e valeuri i valori ad essi associati. Di seguito presentiamo una tabella a tre colonne:

colonna 1: riporta la definizione di un controllo HTML dell'esempio;
colonna 2: mostra come viene visualizzato questo controllo in un browser;
colonna 3: riporta il valore inviato al server dal browser per il controllo della colonna 1 nella forma in cui appare nella richiesta GET dell'esempio.

controllo HTML	visualizzazione	valore/i restituito/i
<input type="radio" value="Sì" name="R1"/>Sì <input type="radio" name="R1" value="no" checked="checked"/>No		R1=Sì - il valore dell'attributo value del pulsante di opzione selezionato dall'utente.
<input type="checkbox" name="C1" value="uno"/>1 <input type="checkbox" name="C2" value="due" checked="checked"/>2 <input type="checkbox" name="C3" value="tre"/>3		C1=uno C2=due - valori degli attributi value delle caselle selezionate dall'utente
<input type="text" name="txtSaisie" size="20" value="alcune parole"/>		txtInserimento=programmazione+Web - testo digitato dall'utente nel campo di immissione. Gli spazi sono stati sostituiti dal segno +
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>		txtMdp=questoèsegreto - testo digitato dall'utente nel campo di immissione
<textarea rows="2" name="areaSaisie" cols="20"> riga1 riga 2 riga3 </textarea>		areaInserimento=le+basi+della%0D%0A programmazione+Web - testo digitato dall'utente nel campo di immissione. %OD%OA è il carattere di fine riga. Gli spazi sono stati sostituiti dal segno +
<select size="1" name="cmbValeurs"> <option value='1'>scelta1</option> <option selected="selected" value='2'>scelta2</option> <option value='3'>opzione3</option> </select>		cmbValori=3 - attributo [value] dell'elemento selezionato dall'utente
<select size="3" name="lst1"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst1=3 - attributo [value] dell'elemento selezionato dall'utente
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option selected="selected" value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst2=1 lst2=3 - attributi [value] degli elementi selezionati dall'utente
<input type="submit" value="Invia" name="cmdRenvoyer"/>		cmdInvia=Invia - nome e attributo value del pulsante utilizzato per inviare i dati del modulo al server
<input type="hidden" name="secret" value="uneValeur"/>		secret=unValore - attributo value del campo nascosto

2.5.3.2. Metodo POST

Modifichiamo il documento HTML in modo che il browser utilizzi ora il metodo POST per inviare i valori del modulo al server Web:


  <form method="post" action="FormulairePost.aspx">

Compiliamo il modulo come per il metodo GET e inviamo i parametri al server tramite il pulsante [Envoyer]. Come illustrato nel paragrafo precedente a pagina 34, in Chrome possiamo visualizzare le intestazioni HTTP della richiesta inviata dal browser:

POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

Nella richiesta HTTP del client compaiono alcune novità:

POST URL HTTP/1.1	la query GET è stata sostituita dalla query POST. I parametri non sono più presenti in questa prima riga della richiesta. Si può notare che ora sono posizionati (riga 14) dopo la richiesta HTTP, seguiti da una riga vuota. La loro codifica è identica a quella che avevano nella richiesta GET.
Content-Length	numero di caratteri "inviati", c.a.d. Il numero di caratteri che il server Web dovrà leggere dopo aver ricevuto le intestazioni HTTP per recuperare il documento inviato dal client. Il documento in questione è in questo caso l'elenco dei valori del modulo.
Content-type	specifica il tipo di documento che il client invierà dopo le intestazioni HTTP. Il tipo [application/x-www-form-urlencoded] indica che si tratta di un documento contenente i valori del modulo.

Esistono due metodi per trasmettere dati a un server Web: GET e POST. Esiste un metodo migliore dell’altro? Abbiamo visto che se i valori di un modulo venivano inviati dal browser con il metodo GET, il browser visualizzava nel proprio campo Adresse la richiesta URL nella forma URL?param1=val1&param2=val2&.... Questo può essere considerato un vantaggio o uno svantaggio:

un vantaggio se si vuole consentire all’utente di inserire questo URL configurato tra i propri link preferiti;
uno svantaggio se non si desidera che l’utente abbia accesso a determinate informazioni del modulo, come ad esempio i campi nascosti.

D'ora in poi, utilizzeremo quasi esclusivamente il metodo POST nei nostri moduli.

2.6. Conclusion

Questo capitolo ha presentato diversi concetti di base dello sviluppo web:

gli scambi client-server tramite il protocollo HTTP;
la progettazione di un documento utilizzando il linguaggio HTML;
la progettazione di moduli di inserimento dati.

Abbiamo visto, con un esempio, come un client potesse inviare informazioni al server Web. Non abbiamo illustrato come il server potesse

recuperare tali informazioni;
elaborarle;
inviare al cliente una risposta dinamica in base al risultato dell’elaborazione.

Questo è il campo della programmazione web, argomento che affronteremo nel capitolo successivo con la presentazione della tecnologia ASP.NET MVC.