Introduzione ad Ajax ed Asp con Jscript

Autore: Luca Ruggiero | Tell a Friend eBook ASP base Impara a creare siti dinamici con ASP e VBScript da zero! Corso ASP Impara a creare siti dinamici professionali con ASP! E-Commerce con ASP Impara a creare un sito di E-Commerce con carrello della spesa!

Concesso in esclusiva da ASP Center - E' vietata la pubblicazione senza espresso consenso del proprietario

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:

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

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

<h1>Cerca un nome</h1>

<form name="m">
    <input type="text" name="n">
    <input type="button" value="Cerca" onclick="RichiestaAJAX(document.m.n.value)">
</form>

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

var XMLHTTP;

function RichiestaAJAX(stringa)
{
    if (stringa.length > 0)
    {
        var url = "ajax.asp?nome=" + stringa;
        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!");
    }
}

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

<%@LANGUAGE = JScript%>
<%
    // CREO L'ARRAY CONTENENTE I DATI
    var nomi = new Array();
    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";

    var nome = Request.QueryString("nome");

    // RICERCO IL NOME ALL'INTERNO DELL'ARRAY PER FORNIRE L'OUTPUT
    if (nome != "")
    {
        var elenco = "";
        for (var i=1; i<nomi.length; i++)
        {
            if (nome == nomi[i].substring(0, nome.length))
            {
                if (elenco == "")
                {
                    elenco = nomi[i];
                }
                else
                {
                    elenco += ", " + nomi[i];
                }
            }
        }
    }

    // VERIFICO SE C'E' UNA CORRISPONDENZA O MENO NELLA RICERCA
    if (elenco == "")
    {
        Response.Write("Nessun risultato...");
    }
    else
    {
        Response.Write(elenco);
    }
%>

http://localhost/ajax.html