Introduzione ad ASP e AJAX

ASP E-Commerce con ASP Menu Javascript Ricette Cocktail Registrazione domini Area Aziende

Home + Articoli + AJAX + Articolo # 140

Introduzione ad AJAX

Da qualche tempo ha preso piede un nuovo modo di ragionare per quanto riguarda l'accesso ai dati e l'esposizione degli stessi sul Web. Questa filosofia ha un nome ben preciso: AJAX, acronimo di A Javascript And XML, ovvero accesso asincrono attraverso Javascript al formato dati XML.

Ho parlato di filosofia e non di tecnologia o linguaggio perchè non c'è assolutamente nulla di nuovo: AJAX mette a disposizione delle tecniche di accesso e di reportistica dei dati attraverso linguaggi e tecnologie già esistenti e di provata funzionalità.

Lo scopo di AJAX

Lo scopo di AJAX è quello di rendere una richiesta di dati ad un Web Server veloce come una richiesta lato client, ma la richiesta, di fatto, è lato server!

La richiesta, dunque, avviene attraverso una pagina Web e viaggia quindi attraverso il protocollo HTTP. Qui entra in gioco XML, o meglio, l'oggetto XML-based XMLHttpRequest che effettua richieste via HTTP sfruttando le potenzialità dell'XML.

Questo oggetto è già noto ai conoscitori dell'oggetto di casa Microsoft XMLHTTP.

Funzionamento di AJAX

Entriamo nel pratico ed analizziamo la già citata filosofia che viene sfruttata nell'utilizzo di AJAX in una Web Application.

C'è innanzitutto bisogno di una libreria di funzioni Javascript che richiami un file lato server, nel nostro caso ASP, e che lo faccia lato client (appunto con Javascript) sfruttando l'oggetto XMLHttpRequest, o che dir si voglia, XMLHTTP.

Il file ASP altro non fa che esaminare la richiesta ed elaborare dei risultati che arriveranno dal Web Server e verranno mostrati a video in tempo reale, essendo la richiesta lato server elaborata lato client. In sostanza AJAX è un middleware che si frappone tra i dati (SQL, XML o quel che sia) e l'interfaccia utente.

Il motivo quindi della presenza di XML nel nome e nel funzionamento di AJAX è duplice:

l'oggetto sfruttato per la creazione di sistemi AJAX-based è a sua volta XML-based;
i risultati sono reperibili direttamente all'interno di strutture XML, fisiche o volatili che siano.

Un esempio basilare di funzionamento di AJAX

Passiamo alla pratica con un esempio basilare, per certi versi di nicchia, da un pundo di vista del suo utilizzo, ma ottimo per entrare nella mentalità di AJAX.

Il risultato sarà l'estrazione di una serie di dati che iniziano per la lettera specificata in una casella di testo. I dati saranno contenuti in un array redatto in ASP (quindi lato server, alla stessa stregua di un estrazione di dati da un database, per intenderci) e saranno estratti con la velocità dello scripting lato client e, soprattutto, senza inviare la richiesta al server perchè viene gestita da AJAX.

Passiamo alla pratica, iniziando dal modulo HTML dell'esempio che inseriremo nel <body> della pagina di cui al ajax.html:

<script type="text/javascript" src="ajax.js"></script>

<h1>Cerca un nome</h1>

<form>
    <input type="text" onkeyup="RichiestaAJAX(this.value)">
</form>

<div id="nomi"></div>

Abbiamo innanzitutto un'inclusione lato client del file Javascript che esamineremo a breve, poi il modulo composto dalla sola casella di testo (che richiama la funzione Javascript all'evento onkeyup, passando come parametro il suo stesso valore), e poi un elemento di testo vuoto a cui assegnamo un ID; in quest'ultimo verranno offerti i dati estratti dalla ricerca per iniziale, qualora ve ne siano a disposizione.

Passiamo al codice Javascript, contenuto nel file ajax.js. I nomi utilizzati per le funzioni sono piuttosto esplicativi in relazione al compito che svolgono:

var XMLHTTP;

function RichiestaAJAX(stringa)
{
    if (stringa.length > 0)
    {
        var url = "ajax.asp?nome=" + stringa.toUpperCase();
        XMLHTTP = QualeBrowser(GestioneStato);
        XMLHTTP.open("GET", url, true);
        XMLHTTP.send(null);
    }
    else
    {
        document.getElementById("nomi").innerHTML = "";
    } 
}

function GestioneStato()
{
    if (XMLHTTP.readyState == 4)
    {
        var R = document.getElementById("nomi");
        R.innerHTML = XMLHTTP.responseText;
    }
}

function QualeBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        } 
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("L'esempio non funziona con altri browser!");
    }
}

L'unica riga da tener presente (dato che il resto del codice è abbastanza simile a tutte le casistiche di impiego di AJAX) è la seguente:

var url = "ajax.asp?nome=" + stringa.toUpperCase();

Si fa riferimento al file ASP da utilizzare e relativi parametri via querystring, valorizzati dal parametro interno della funzione di richiamo trasformati sempre e comunque in minuscolo.

Passiamo al codice ASP, contenuto nel file ajax.asp, opportunamente commentato nei suoi passaggi salienti:

<%@LANGUAGE = VBScript%>
<%
    Option Explicit
    On Error Resume Next

    ' DICHIARO LE VARIABILI IN USO NELLO SCRIPT
    Dim nomi(13), nome, i, elenco

    ' CREO L'ARRAY DEI DATI
    nomi(1)  = "Alberto"
    nomi(2)  = "Alessandro"
    nomi(3)  = "Alessio"
    nomi(4)  = "Alfonso"
    nomi(5)  = "Alfredo"
    nomi(6)  = "Bruno"
    nomi(7)  = "Ciro"
    nomi(8)  = "Claudio"
    nomi(9)  = "Davide"
    nomi(10) = "Dario"
    nomi(11) = "Donato"
    nomi(12) = "Ernesto"
    nomi(13) = "Francesco"
    nome = Request.QueryString("nome")

    ' RICERCO IL NOME ALL'INTERNO DELL'ARRAY PER FORNIRE L'OUTPUT
    If Len(nome) > 0 Then
        elenco = ""
        For i = 1 To UBound(nomi)
            If nome = UCase(Mid(nomi(i), 1, Len(nome))) Then
                If elenco = "" Then
                    elenco = nomi(i)
                Else
                    elenco = elenco & ", " & nomi(i)
                End If
            End If
        Next
    End If 

    ' VERIFICO SE C'E' UNA CORRISPONDENZA O MENO NELLA RICERCA
    If elenco = "" Then 
        Response.Write "Nessun risultato..."
    Else
        Response.Write elenco
    End If
%>

Si provi dunque a digitare una lettera all'interno della casella di testo del file HTML, dopo averlo richiamato nel browser all'indirizzo:

http://localhost/ajax.html