Durante la navigazione in Internet capita con una certafrequenza di imbattersi in indirizzi che terminano con una serie di simbolie non con il nome del file che stiamo consultando. Ecco un esempio:
http://www.server.com/index.html?id=1&rif=10&altrovalore=190
Si tratta di una QueryString, un metodo
utilizzato per lo più in applicazioni lato server. uno dei maggiori vantaggi che
offre è quello di poter utilizzare una sola pagina per mostrare output
differenti in funzione dei valori associati alle variabili in coda agli indirizzi.
Proviamo a leggere di nuovo l'indirizzo proposto in precedenza formattato in maniera da isolare i valori passati in QueryString:
http://www.server.com/index.html?id=1&rif=10&altrovalore=190
Ho evidenziato in grassetto i simboli utilizzati per la QueryString passata nell'indirizzo, esaminiamo il loro significato:
?
Il simbolo punto interrogativo separa l'estensione del file corrente dalla prima variabile necessaria alla
lettura del contenuto della pagina.
&
Il simbolo e commerciale separa il valore della prima variabile dal nome della seconda variabile, e così via per la terza, la quarta ed eventuali altre.
=
Il simbolo uguale è, in ambito di programmazione, un operatore di assegnamento.
In pratica, attribuisce un "left-value" alla variabile a cui è associato. Un esempio
di QueryString semplice potrebbe essere:
http://www.server.com/index.html?id=1
ed è su questo modello basilare che lavoreremo.
Con l'ausilio di linguaggi di programmazione lato server, come ad esempio Asp,è possibile inizializzare una variabile all'interno del file che riceve la QueryStringda un altro file con un semplice link del tipo:
<a href="categoria.asp?id=1">Prima catetoria</a>
In questo caso il file categoria.asp potrebbe, ad esempio, ricevere come inputun valore numerico. L'inizializzazione potrebbe essere la seguente:
<%
var id = parseInt(Request.QueryString("id"));
%>
Calma, non voglio parlare di Asp, ma colgo l'occasione per sottolineare comesia differente l'impiego delle QueryString in un'applicazione lato server daun'applicazione lato client, ed al tempo stesso come sia possibile servirseneanche nella maniera nativamente meno congeniale, in modo da renderlo altrettantovalido. I linguaggi lato server permettono il trasferimento di variabili, quindidi informazioni, tra pagine diverse, cosa che non è possibile fare sul latoclient. Ma Javascript mette a disposizione la proprietà location.search,utile a reperire la QueryString associata all'indirizzo della pagina. Con unaserie di pochi e semplici passaggi possiamo servircene per mostrare in una stessapagina contenuti completamente diversi in funzione della QueryString associata.
Creiamo una pagina Html che faccia da indice di una serie di argomenti (vedi esempio) ed inseriamo ilseguente codice:
<html>
<head>
<title>Esempio di utilizzo delle QueryString con Javascript</title>
</head>
<body>
<ul>
<li><a href="querystring.html?id=1">Vai alla pagina nomero uno</a></li>
<li><a href="querystring.html?id=2">Vai alla pagina nomero due</a></li>
<li><a href="querystring.html?id=3">Vai alla pagina nomero tre</a></li>
</ul>
</body>
</html>
Notiamo che tutti i link puntano alla pagina querystring.html, ma adognuno è associata una QueryString differente. In funzione di queste differenzeil contenuto mostrato a video della pagina in questione sarà differente. Lasoluzione più immediata è quella di utilizzare una serie di istruzioni ifper impostare il contenuto della pagina a seconda che il valore della QueryStringsia 1, 2, 3 o altro. Nel caso in cui alla QueryString associata all'indirizzonon corrisponda alcun documento, invieremo invece un messaggio di errore.
Il codice che dobbiamo utilizzare è quindi semplice.
<html>
<head>
<title>Esempio di utilizzo delle QueryString con Javascript</title>
<basefont size="2" face="Verdana">
<script language="javascript" type="text/javascript">
<!--
var querystring = location.search;
//-->
</script>
</head>
<body link="#0000FF" vlink="#0000FF" alink="#FF0000">
<script language="javascript" type="text/javascript">
<!--
if (querystring == "?id=1") {
with(document) {
write('<table align="center" width="700" border="1">');
write(' <tr>');
write(' <td align="center">');
write(' <b>Stai visitando la pagina numero uno!</b>');
write(' </td>');
write(' </tr>');
write('</table>');
}}else if (querystring == "?id=2") {
with(document) {
write('<table align="center" width="700" border="1">');
write(' <tr>');
write(' <td align="center">');
write(' <b>Stai visitando la pagina numero due!</b>'); write(' </td>');
write(' </tr>');
write('</table>');
}
}
else if (querystring == "?id=3") {
with(document) {
write('<table align="center" width="700" border="1">');
write(' <tr>');
write(' <td align="center">');
write(' <b>Stai visitando la pagina numero tre!</b>');
write(' </td>');
write(' </tr>');
write('</table>');
}
}
else {
with(document) {
write('<table align="center" width="700" border="1">');
write(' <tr>');
write(' <td align="center" style="color: #FF0000;">');
write(' <b>Errore 404: File non trovato!</b>');
write(' </td>');
write(' </tr>');
write('</table>');
}
}
//-->
</script>
</body>
</html>
Il costrutto sintattico che ci torna utile è associabile alla sola voce:
if (querystring = = "?id=1")
Nell'esempio ho utilizzato una serie di document.write()per costruire al volo la pagina, ma se si dovesse trattare di codici molto lunghie complessi, consiglio di includere file esterni, trasformando il codice in:
if (querystring == "?id=1") {
document.write('<script language="javascript" src="file_da_includere_1.js"></script>');
}
if (querystring == "?id=2") {
document.write('<script language="javascript" src="file_da_includere_2.js"></script>');
}
// e così via per tutte le altre possibilità
else {
with(document) {
write('<table align="center" width="700" border="1">');
write(' <tr>');
write(' <td align="center" style="color: #FF0000;">');
write(' <b>Errore 404: File non trovato!</b>');
write(' </td>');
write(' </tr>');
write('</table>');
}
}
Per conoscere il valore della QueryString associato alla pagina corrente, oltread usare la barra di stato, è sufficiente eseguire un alert del valore contenutoin location.search, ad esempio:
<input type="button" value="Leggi il valore della QueryString" onClick="alert(location.search)">
Se la pagina corrente non contiene alcuna QueryString comparirà un messaggio vuoto come in questo caso:
Utilizzare o meno uno strumento del genere in una pagina Html è utile in queicasi in cui si vogliano mettere a disposizione informazioni passando per unasola pagina, evitando quindi di doverne scrivere un numero maggiore. Èanche un modo per risparmiare risorse sul server, ma c'è da valutare che seil browser del visitatore non supporta Javascript, o ha gli script disabilitati,non sarà possibile mostrare alcuna informazione. Sarà dunque opportuno ricorrerea soluzioni alternative, ad esempio avvisando l'utente di abilitare Javascripto di aggiornare il proprio browser con una versione più recente, oppure fornendoversioni alternative del contenuto.
