AJAX e ASP: l'autocompletamento

Tra gli addetti ai lavori le parole più usate delmomento sono AJAX (Asynchronous Javascript And XML) e WEB2.0.

Per quanto WEB 2.0 sia ancora un concetto piuttosto fumosoè, invece, sicuro che tutti gli sforzi deiprogrammatori siano volti a rendere le interfacce webpiù funzionali, potenti e semplici possibili.

AJAX è stato il classico "uovo di colombo"che ha fatto fare un significativo passo in avanti in questadirezione.

Non una nuova tecnologia ma una nuova metodologia in cui siutilizza Javascript e l'oggetto XMLHTTPRequest in modo dasimulare la velocità e l'efficacia degliapplicativi standalone.

In questo tutorial non spiegherò come funziona AJAX macome è possibile utilizzare delle librerie Javascript,liberamente scaricabili dalla rete, per ravvivare un po'il buon vecchio Classic ASP. Chi possiede un account Gmailavrà trovato molto comoda la funzione di"suggerimento" dell'indirizzo email non appenasi iniziano a digitare poche lettere nel campo input. Lalista di suggerimento non è altro che il risultato diuna query che produce una lista resa visibile su un layer.

Andiamo con ordine.
Scaricate la più aggiornata libreria disponibile suscript.aculo.us. Scompattate l'archivio.
Le cartelle che ci serviranno saranno "lib" e"src".

Adesso creiamo la nostra paginetta in cui chiediamo alvisitatore di dirci da quale paese del mondo proviene.

1.<!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" lang="en-us"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Mi dici il tuo paese?</title><link rel="stylesheet" type="text/css" href="cssform.css" /><script src="/lib/prototype.js" type="text/javascript"></script><script src="/src/scriptaculous.js" type="text/javascript"></script></head><body><h3>Registrazione </h3><div id="container"><p id="fm-intro">Fields in <strong>bold</strong> are required.</p><form id="fm-form" method="post" action="insert.asp"><fieldset><legend>Customer informations</legend><div class="fm-req"><label for="fm-country">Country:</label><input name="fm-country" id="fm-country" type="text"/></div><div id="ac-country-update" style="display:none;border:1px solid black;background-color:white;"></div><script type="text/javascript" language="javascript" charset="iso-8859-1">// <![CDATA[new Ajax.Autocompleter('fm-country','ac-country-update','autocompletamento_country.asp',{});// ]]></script></fieldset><div id="fm-submit" class="fm-req"><input name="Submit" value="Submit" type="submit" /></div><br /></form></div></body></html>

Notiamo che sotto al nostro campo input ho aggiunto unoscript Javascript che serve a richiamare la funzioneAutocompleter dell'oggetto Ajax.
Gli passo tre parametri: il nome del campo input, il nomedel layer che dovrà essere "popolato" e lapagina cui devo passare i parametri.

La pagina 'autocompletamento_country.asp' èsemplicissima (io uso delle subroutine per aprire e chiudereconnessioni e creare recordset ma potete utilizzare i vostrimetodi preferiti)

1.<%set conn = Server.CreateObject("ADODB.Connection")set rs = Server.CreateObject("ADODB.Recordset")ConnCal = "Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source=" & Server.MapPath("country.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 subOpenDB(ConnCal)sql = "SELECT * FROM country WHERE country LIKE '

" & Request.Form("fm-country") & "%'"rs.open sql%><ul><% if not rs.eof thendo while not rs.eof%><li><%w(rs("country"))%></li><%rs.movenextloopend ifCloseDB()%></ul>

Il funzionamento è semplice. Non appena l'utentedigita una lettera nel campo input viene fatta una query inmaniera nascosta. Ad esempio l'utente digita 'a'e la query sarà per tutti quei paesi il cui nomecomincia per a (è importante in questo caso aver messoil carattere jolly). Nel momento in cui l'utente digitala seconda lettera i risultati della query diminuiscono.

Tutto questo senza reload della pagina perchè latrasmissione di input avviene in maniera diretta, in XML,attraverso il famoso oggetto XMLHTTPRequest che fa lavorareuna pagina remota. I risultati vengono poi parsati nel layervisibile nella pagina utente.
La selezione di uno dei risultati dalla lista non ordinata,scatenerà l'evento che riempirà il campoinput e farà scomparire il layer.