AJAX e ASP: l'autocompletamento

Tra gli addetti ai lavori le parole più usate del momento sono AJAX (Asynchronous Javascript And XML) e WEB 2.0.

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

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

Non una nuova tecnologia ma una nuova metodologia in cui si utilizza Javascript e l'oggetto XMLHTTPRequest in modo da simulare la velocità e l'efficacia degli applicativi standalone.

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

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

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

<!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" required for 'hide optional fields' function -->
<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 uno script Javascript che serve a richiamare la funzione Autocompleter dell'oggetto Ajax.
Gli passo tre parametri: il nome del campo input, il nome del layer che dovrà essere "popolato" e la pagina cui devo passare i parametri.

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

<%
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 = 0
Const adOpenKeyset = 1
Const adOpenDynamic = 2
Const adOpenStatic = 3

'---- CursorLocationEnum Values ----
Const adUseServer = 2
Const adUseClient = 3

'---- CommandTypeEnum Values ----
Const adCmdUnknown = &H0008
Const adCmdText = &H0001
Const adCmdTable = &H0002
Const adCmdStoredProc = &H0004
Const adCmdFile = &H0100
Const adCmdTableDirect = &H0200

sub OpenDB(sConn)
conn.open sConn
set rs.ActiveConnection = conn
rs.CursorType = adOpenStatic
end sub

sub CloseDB()
rs.close
conn.close
set rs = nothing
set conn = nothing
end sub

sub w(sText)
response.write sText & vbCrLf
end sub

OpenDB(ConnCal)
sql = "SELECT * FROM country WHERE country LIKE '" & Request.Form("fm-country") & "%'"
rs.open sql
%>
<ul>
<% if not rs.eof then
do while not rs.eof
%>
<li><%w(rs("country"))%></li>
<%
rs.movenext
loop
end if
CloseDB()
%>
</ul>

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

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

commenta la notizia

C'è 1 commento

ordina per primi ultimi + apprezzati

09/07/2010 alle ore: 01:0 Redazione

Condividi le tue opinioni su questo articolo!

Ti potrebbe interessare anche

commenta la notizia