Le select concatenate

Continua l'esplorazione di AJAX applicato a Classic ASP.Questa volta parliamo di "Select concatenate".

Una domanda molto frequente nei forum è qualcosa deltipo: "Come posso modificare le option di una select inbase alla scelta di un'altra select?" .
Se questi valori sono statici allora la risposta è inalcune funzioni javascript che selezionano array di valorigià scritti nel codice.

Se i valori sono attinti da un database allora possiamoutilizzare AJAX e il solito oggettoXMLHttpRequest.

Nell'esempio abbiamo 3 regioni italiane: Campania, Lazioe Lombardia.
Questi tre valori popoleranno la prima select. In base allascelta della prima select, la seconda si popolerà conle sue province.

Il semplice db Access si chiama"db2" e consta di due tabelle:"regioni" (campi: ID, regione),"citta" (campi: ID, id_reg,citta). C'è una relazione uno-a-molti tra"ID" della tabella"regioni" e "id_reg"della tabella "citta".

Per creare la nostra applicazione ci bastano 3 file ASP:_db.asp (il file che crea gli oggetti per ildb), index.asp (pagina principale con leselect e le funzioni javascript),cercaprovince.asp (che effettua la query inremoto)

Sul file _db.asp non mi soffermo. Èun semplice file che contiene tutto quello che mi puòservire per aprire e chiudere connessioni e creare oggetti didatabase

<%set conn = Server.CreateObject("ADODB.Connection")set rs = Server.CreateObject("ADODB.Recordset")connAJAX = "Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source=" & Server.MapPath("/db2.mdb")'---- CursorTypeEnum Values ----Const adOpenForwardOnly = 0Const adOpenKeyset = 1Const adOpenDynamic = 2Const adOpenStatic = 3'---- CursorLocationEnum Values ----Const adUseServer = 2Const adUseClient = 3'---- CommandTypeEnum Values ----Const adCmdUnknown = &H0008Const adCmdText = &H0001Const adCmdTable = &H0002Const adCmdStoredProc = &H0004Const adCmdFile = &H0100Const adCmdTableDirect = &H0200sub OpenDB(sConn)conn.open sConnset rs.ActiveConnection = connrs.CursorType = adOpenStaticend subsub CloseDB()rs.closeconn.closeset rs = nothingset conn = nothingend subsub w(sText)response.write sText & vbCrLfend sub%>

Il file index.asp contiene il cuoredell'applicazione sotto forma di due funzioni Javascript:cerca() e ricevi()

<!--#include virtual="/_db.asp"--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>AJAX e ASP - Select concatenate</title><script language="javascript">var ricerca_pro;function cerca(){var valorecampo = document.form1.regione.options[document.form1.regione.selectedIndex].value;// per l'oggetto nativo XMLHttpRequestif (window.XMLHttpRequest) {ricerca_pro = new XMLHttpRequest();ricerca_pro.onreadystatechange = ricevi;ricerca_pro.open("GET" , "cercaprovince.asp?reg=" +valorecampo,true);ricerca_pro.send(null);// per IE} else if (window.ActiveXObject) {ricerca_pro = new ActiveXObject("Microsoft.XMLHTTP");if (ricerca_pro) {ricerca_pro.onreadystatechange = ricevi;ricerca_pro.open("GET" , "cercaprovince.asp?reg=" +valorecampo,true);ricerca_pro.send();}}}function ricevi() {var strRes;var arrValori;if (ricerca_pro.readyState == 4) {strRes=ricerca_pro.responseText;arrValori=strRes.split("|");document.form1.citta.options.length=0;for(i=0;i<arrValori.length;i++){document.form1.citta.options[document.form1.citta.options.length]= new Option(arrValori[i].split("|"));}}}</script></head><%'apro connessione e istanzio oggettiOpenDB(connAJAX)'query per la prima selectstrsql = "SELECT id,regione FROM regioni"rs.open strsql%><body>Scegli regione:<form id="form1" name="form1" method="post" action=""><label>regione<select name="regione" accesskey="1" tabindex="1" onchange="cerca()"><option selected="selected" value=0>Scegli regione</option><%do while not rs.eof%><option value="<%=rs("id")%>"><%=rs("regione")%></option><%rs.movenextloopCloseDB%></select></label><p><label>citt&agrave;<select name="citta" accesskey="2" tabindex="2"></select></label></p></form></body></html>

La funzione cerca(), scatenata dal onchange sulla select"regione" , si occupa di leggere il valoreselezionato nella select "regione" e di inviarlotramite il metodo GET alla paginacercaprovince.asp.
Nella funzione si può notare una Ifperchè c'è la possibilità sia diutilizzare l'oggetto XMLHttpRequestnativo, sia quello messo a disposizione da Internet Explorertramite ActiveX.
L'evento onreadystatechange cattura ilcambio di stato della proprietàreadystate che indica, a sua volta, lo statocorrente del documento XML.

La funzione ricevi(), quando il documento XML è statocompletamente caricato (readystate = 4), splitta la stringain un array e popola la select "citta".

Il file cercaprovince.asp si occupa dieseguire la query e formattare i risultati in una stringa

<!--#include virtual="/_db.asp"--><%'apro connessione e istanzio oggettiOpenDB(connAJAX)reg = Request.QueryString("reg")strsql = "SELECT citta FROM citta WHERE id_reg = " &reg& ""rs.open strsqlprimo = 0if not rs.eofdo while not rs.eof'compongo l'array con i risultatiif primo = 0 thenprimo = 1array_citta = rs("citta")elsearray_citta = rs("citta") & "|" & array_cittaend ifrs.movenextloopend ifw(array_citta)CloseDB%>

Come spesso succede con AJAX, è più difficilespiegarne il funzionamento che applicare le tecniche.
Diciamo che l'unico limite reale è, come sempre,la fantasia.