Il protocollo HTTP (HyperText Transfer Protocol) insieme al linguaggio di markup HTML costituiscono la base del Web. I dettagli di come richiedere una pagina HTML e di come inviare dati al server sono interamente gestiti dal browser e lo sviluppatore di pagine Web può permettersi di ignorarli.
Questo è vero fino a quando non si hanno esigenze particolari che prevedono l'interazione diretta con il server e la manipolazione di dati da parte del client. Si pensi, ad esempio, all'analisi del contenuto di una pagina Web direttamente tramite il client o alla richiesta di dati caricati dinamicamente sul client o all'invocazione di uno script remoto.
In questi casi la possibilità di utilizzare direttamente il protocollo HTTP risulta molto utile.
Ma come possiamo gestire questo protocollo dall'interno di una pagina Web? Quale supporto viene offerto dai browser?
A queste domande cercheremo di rispondere in questo articolo.
Elementi di HTTP
Il protocollo HTTP si basa su una serie di comandi diretti al server per richiedere o inviare dati. Tra questi, i tre comandi più noti sono:
GET
Tramite questo comando viene richiesta una risorsa sul server. Una risorsa può essere rappresentata da una pagina HTML, un'immagine o un qualsiasi altro tipo di file, ma può essere costituito anche dal risultato dell'esecuzione di uno script o di una pagina ASP, PHP, ecc.
POST
Il comando POST consente di inviare dati al server contestualmente alla richiesta di una risorsa. Generalmente questo comando viene utilizzato per inviare dati raccolti tramite una form.
HEAD
Con questo comando vengono richieste al server informazioni su una risorsa, non la risorsa stessa. Ad esempio, può essere richiesta la data di modifica della risorsa, le dimensioni o il tipo senza caricare la risorsa stessa
Le specifiche del protocollo prevedono altri comandi, come PUT, DELETE, CONNECT, ecc., ma per lo scopo del nostro articolo non ci occuperemo di questi comandi.
HTTP, JavaScript e i browser
Individuati i comandi principali del protocollo HTTP non ci resta che scoprire come fare ad inviarli al server. A parte l'evidente utilizzo implicito dei metodi GET e POST tramite i link e le form HTML, lo strumento chiave per poter effettuare un minimo di elaborazione sui risultati inviati dal server è naturalmente JavaScript.
Ma come possiamo inviare comandi al server utilizzando JavaScript? Purtroppo, mentre il protocollo HTTP rappresenta uno standard di interazione tra un Web server e tutti i browser, la stessa cosa non vale per il supporto offerto dai browser per l'utilizzo del protocollo tramite JavaScript. I principali browser forniscono meccanismi diversi per consentire di interagire con il server dall'interno di una pagina Web.
Il browser di Microsoft consente di sfruttare il protocollo HTTP tramite la libreria MSXML. Per utilizzare la libreria in JavaScript è necessario creare un'istanza della classe XMLHTTP come nel seguente esempio di codice:
Purtroppo, l'identificatore della libreria da passare al costruttore ActiveXObject
objHTTP = new ActiveXObject("Microsoft.XMLHTTP")
Mozilla mette a disposizione l'oggetto XMLHttpRequest
objHTTP = new XMLHttpRequest()
L'oggetto XMLHttpRequest
Un approccio uniforme
Questa situazione non rende agevole scrivere codice JavaScript che sfrutti il protocollo HTTP e che sia indipendente dal browser che lo eseguirà. Perché il protocollo HTTP sia effettivamente utilizzabile dall'interno di pagine Web tramite JavaScript dobbiamo necessariamente rendere uniforme l'approccio offerto dai vari browser.
Confrontando gli oggetti XMLHTTP e XMLHttpRequest ci rendiamo conto che l'oggetto nativo di Mozilla rappresenta la base comune a cui fare riferimento per un supporto uniforme sui più comuni browser.
Per far questo possiamo scrivere una funzione che individua il tipo di supporto offerto dal browser corrente ed restituisce un oggetto per la gestione del protocollo HTTP, come quella che segue.
var xmlhttp = null;
if (window.ActiveXObject) {
if (navigator.userAgent.toLowerCase().indexOf("msie 5") != -1)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if (!xmlhttp && typeof(XMLHttpRequest) != 'undefined') {
xmlhttp = new XMLHttpRequest()
}
return xmlhttp
}
Questa funzione restituisce un oggetto che corrisponde alla versione di XMLHTTP corretta nel caso di Internet Explorer o all'oggetto di XMLHttpRequest
Inviare richieste al server...
Dopo aver individuato un metodo per sfruttare il protocollo HTTP indipendentemente dallo specifico browser, vediamo come possiamo inviare richieste al Web server.
Una richiesta diretta al Web server viene effettuata mediante tre passi fondamentali:
- apertura della connessione HTTP
- impostazione della funzione da richiamare al ricevimento della risposta da parte del server
- invio della richiesta
Ad esempio, il seguente codice mostra come richiedere la risorsa test.htm
objHTTP = getXMLHttp();
//Passo 1
objHTTP.open("GET", "test.htm", true);
//Passo 2
objHTTP.onreadystatechange = function() {elaboraRisposta()}
//Passo 3
objHTTP.send(null)
Come si può vedere dall'esempio, tramite il metodo open() test.htm
Il terzo parametro del metodo open() true false
In generale, sarebbe meglio utilizzare la modalità asincrona di comunicazione.
Se utilizziamo la modalità asincrona, dobbiamo specificare come elaborare la risposta inviata da parte del server. Per questo scopo utilizziamo la proprietà onreadystatechange elaboraRisposta()
Infine il metodo send()
...ed analizzare le risposte
Seguendo il nostro esempio, non appena il browser riceve la risposta da parte del server viene eseguita la funzione elaboraRisposta() che ha la seguente forma:
if (objHTTP.readyState == 4) {
alert(objHTTP.responseText)
}
}
La nostra funzione utilizza la proprietà readyState responseText
La proprietà readyState alert()
In alcuni casi si può avere la necessità di accedere agli header HTTP della risposta del server, cioè a quell'insieme di informazioni tecniche inviati dal server come il tipo e la versione del Web server, il tipo di contenuto e le dimensioni in byte della risposta, la data dell'ultima modifica, ecc.
Per accedere a queste informazioni possiamo sfuttare il metodo getAllResponseHeaders() getResponseHeader()
Ad esempio, per ottenere la data dell'ultima modifica del documento inviato come risposta alla nostra richiesta potremmo scrivere:
alert(objHTTP.getResponseHeader("Last-Modified"))
Un altro tipo di informazione che potremmo analizzare in una risposta è il codice di stato HTTP, un'informazione numerica che indica lo stato della risorsa richiesta. Ad esempio, il codice 200 indica che la risorsa richiesta esiste, mentre il codice 404 indica che questa non esiste. Questa informazione è accessibile tramite la proprietà status
Un'ultima nota
Il supporto del protocollo HTTP tramite JavaScript apre diverse prospettive di utilizzo. Tuttavia occorre tener presente un'importante limitazione.
Normalmente i browser applicano la politica di sicurezza che limita l'accesso allo stesso dominio a cui appartiene la pagina corrente. In pratica ciò vuol dire che non possiamo effettuare richieste ad un server diverso da quello su cui si trova la nostra pagina Web. La limitazione può essere eliminata modificando le politiche di sicurezza dello specifico browser, ma naturalmente questo difficilmente è applicabile in una pagina che fa parte di un sito Web pubblico.
Abbiamo introdotto le nozioni di base per l'utilizzo del protocollo HTTP all'interno di una pagina HTML tramite JavaScript. Proponiamo alcuni esempi di utilizzo del protocollo per illustrarne le potenzialità.
Controllo di link interrotti
Nel corso della vita di un sito Web può capitare che alcuni link inizialmente validi, cioè che puntano a pagine esistenti, possano per cause diverse diventare non più validi o, come spesso si dice, interrotti. Un meccanismo che può risultare utile in queste circostanze è il controllo dei link interrotti tramite una funzione che li individua e ne inibisce la visualizzazione. Ecco una demo.
Per ottenere questo comportamento possiamo scrivere una funzione analoga alla seguente:
var links = document.links
var nLinks = document.links.length
var i
objHTTP = getXMLHttp();
for (i=0;i<nLinks;i++) {
objHTTP.open("HEAD", links[i],false);
objHTTP.send(null);
if (objHTTP.readyState==4) {
if (objHTTP.status==404) links[i].style.visibility = "hidden"
}
}
}
La funzione, dopo avere instanziato l'oggetto objHTTP
Dopo l'invio della richiesta viene valutata la risposta del server e nel caso in cui la risorsa non esiste, corrispondente al codice di stato 404, il link viene reso invisibile agendo sulla proprietà visibility
Per l'applicazione effettiva della funzione hideLinks() onLoad
Non sempre, però, nascondere un link interrotto ha senso. Si immagini il caso in cui il link si trova all'interno di un testo. Rendere invisibile il link significherebbe rendere illeggibile il testo stesso. In alternativa è possibile eliminare l'URL non valido e visualizzare un tooltip che indica che il link non è più attivo, come nella seguente istruzione:
Esecuzione di script remoti
Un'utile applicazione del protocollo HTTP lato client consiste nell'esecuzione di script remoti. Questo tipo di applicazione consente di richiedere elaborazioni sul server e di presentarle sul client senza necessità di ricaricare la pagina corrente.
Per fare un semplice esempio di questa tecnica, consideriamo la seguente form HTML che prevede l'immissione di due valori numerici e consente di farne la somma (anche qui una semplice demo):
Valore 1 <input id="v1" type="text"/>
<br/>
Valore 2 <input id="v2" type="text"/>
<br/>
Risultato <input id="risultato" type="text"/>
<br/>
<input type="button" value="Somma" onClick="somma(this.form.v1.value,
this.form.v2.value)"/>
</form>
La funzione JavaScript somma() somma.asp
function elaboraRisposta() {
if (objHTTP.readyState==4) {
document.forms[0].risultato.value = objHTTP.responseText
}
}
Eseguendo lo script l'utente vedrà il risultato nella terza casella senza ricaricare la pagina corrente.
Naturalmente l'esempio ha il solo scopo di presentare il principio dell'invocazione remota di uno script. In casi concreti ha senso invocare uno script remoto soltanto quando l'elaborazione richiede risorse disponibili solo sul server, come ad esempio un database. Ad esempio, si possono immaginare funzioni per il calcolo del codice fiscale, recupero di CAP data una città, ecc.
Recupero di dati da un database
Un altro esempio di invocazione di script remoti è rappresentato dalla richiesta di caricamento di dati da un database. Supponiamo di avere una lista di città e che alla selezione di una città da parte dell'utente vogliamo che vengano visualizzate le relative informazioni descrittive tratte da un database presente sul server. Possiamo recuperare le informazioni descrittive di ciascuna città sfruttando il protocollo HTTP e senza ricaricare la pagina corrente. Ecco la demo.
La lista delle città può essere rappresentata come nel seguente esempio di codice HTML:
<option value="Firenze">Firenze</option>
<option value="Milano">Milano</option>
<option value="Roma">Roma</option>
</select>
La descrizione di ciascuna città viene visualizzata dinamicamente in corrispondenza del cambio della città selezionata eseguendo la funzione JavaScript display()
function display(city) {
objHTTP.open("GET", "infocity.asp?c=" + city,true);
objHTTP.onreadystatechange= function() {elaboraRisposta()};
objHTTP.send(null);
}
function elaboraRisposta() {
if (objHTTP.readyState==4) {
document.getElementById("descrizione").innerHTML = objHTTP.responseText
}
}
La funzione invoca lo script remoto infocity.asp <div>
Conclusioni
Come abbiamo visto, la possibilità di sfruttare il protocollo HTTP tramite JavaScript consente diverse applicazioni pratiche. In particolare, l'esecuzione di script remoti consente di ottimizzare l'uso della banda di trasmissione e di offrire un aggiornamento dinamico della pagina corrente senza ricaricarla interamente.
In questo articolo abbiamo analizzato il supporto di HTTP offerto da XMLHTTP e XMLHttpRequest. Tuttavia ricordiamo che questi oggetti consentono, come suggerisce il nome, anche un supporto per l'elaborazione di documenti XML.
