Lavorare con Ajax: cos’è e come funziona

AJAX è l’acronimo di Asynchronous JavaScript And XML, ovvero “Javascript e XML in asincronia”. E’ bene precisare fin da subito che non si tratta di una nuova tecnologia ma di una metodologia attraverso la quale è possibile gestire contenuti lato server in maniera veloce ed efficace attraverso la portabilità e la praticità di XML e la velocità e la precisione di esecuzione di script lato client in Javascript.

In funzione di questa considerazione il lettore sappia che non sta imparando un nuovo linguaggio ma, per una piena comprensione, sono indispensabili delle conoscenze già consolidate soprattutto di Javascript, ed anche di XML.

Chi sviluppa applicazioni Web lato server sa bene che, ad ogni richiesta di dati, c’è bisogno di un invio della richiesta stessa via HTTP al server Web che deve elaborarla fino a restituirla al client e, per quanto breve possa essere la richiesta, per quanto performante possa essere il server ed ottimizzato lo script, si rende indispensabile il caricamento (o ri-caricamento) della pagina.

AJAX evita tutto questo semplicemente interagendo lato client con i dati richiesti che sono stati già trasformati in formato XML. Allo scopo, infatti, è stato creato l’oggetto XMLHttpRequest il cui funzionamento si basa sul già noto oggetto XMLHTTP.

In sostanza AJAX si pone come intermezzo tra la gestione e l’esposizione dei dati, velocizzando i processi di esposizione dei dati eliminando la fase di caricamento/ricaricamento delle pagine web.

In questa guida vedremo le basi di questa nuova metodologia di sviluppo in ambito web, affrontando tanto aspetti teorici quanto pratici (non mancheranno gli esempi pratici e gli script pronti all’uso).

Storia di AJAX

Trattandosi di una tecnologia piuttosto nuova, almeno nel momento in cui scrivo, conoscere un po di storia di AJAX può tornare utile al lettore, sia pur non da un punto di vista pratico, ma per entrare a pieno nella filosofia di questa tecnica, onde metabolizzarla meglio e capire il prechè della sua esistenza.

Microsoft cercava da anni di implementare un sistema simile ed in qualche modo lo ha introdotto in ASP.NET il cui funzionamento si basa molto su XML e sulla trasformazione di comandi lato server in Javascript lato client in modo da rendere il suo utilizzo “event-driven”, ma non ha nulla a che vedere col concetto filosofico di AJAX.

In seguito la stessa Microsoft stava studiando un sistema che voleva chiamare Remote Scripting ma poi l’avvento di AJAX l’ha dissuasa ed AJAX stesso è diventato uno standard.

Colui che ha dato per la prima volta un nome a questa tecnica è Jesse Garrett che, nel 18 Febbraio 2005, ne parlò nel suo Blog.

Nel corso degli anni, dalla metà degli anni 90 ad oggi, sono stati moltissimi i sistemi pensati dagli sviluppatori per ovviare al problema del refresh delle pagine dato dall’invio di richieste HTTP, ma mai nessuno di questi, che sarebbe impossibile elencare, è diventato uno standard.

Concludo con una nota personale: da anni, con alcuni colleghi, sviluppiamo applicazioni Intranet ad interfaccia Web sfruttando Javascript ed XMLHTTP, fermo restando che le applicazioni erano scritte in ASP e basate su database MS SQL Server, semplicemente scrivendoci delle librerie lato client che definivamo “listener”, ma non ci è mai venuto in mente di dare a questo sistema nome AJAX o Manchester United, altrimenti saremmo ricchi e famosi… peccato 🙂

Funzionamento di AJAX

Come accennato nella lezione precedente, AJAX non è una tecnologia ma un sistema di sviluppo di applicazioni Web lato server che sfrutta le caratteristiche di Javascript lato client ed XML per velocizzare i processi di richiesta ed esposizione dei dati.

Essendo uno standard si tratta di un sistema cross-browser (compatibile con tutti i browser Web) in cui, però, l’oggetto XMLHttpRequest assume comportamenti differenti e, in taluni casi, anche nomi differenti, pur trattandosi sempre dello stesso oggetto.

In Microsoft Internet Explorer, ad esempio, l’oggetto XMLHttpRequest viene istanziato come ActiveX, mentre in browser come Firefox, Opera, Netscape, Safari ed altri, il suo supporto è nativo.

Il suo funzionamento è estremamente semplice ed equivale, in via filosofica, all’invio di dati attraverso un modulo HTML attraverso i metodi GET e/o POST.

La differenza sta, come accennato in precedenza, nei tempi di attesa praticamente inesistenti, dato che i dati sono già caricati in memoria in elementi come array Javascript o nell’XML, fisico o generato “al volo” che sia.

Per rendere l’idea in maniera semplice e schematica possiamo utilizzare una rappresentazione grafica, iniziando dal normale, e sempre in uso, processo di invio e restituzione dei dati remoti via HTTP:

Vediamo adesso una rappresentazione grafica di uno scambio dati attraverso una richiesta HTTP remota gestita da AJAX:

La differenza è lampante ed anche l’importanza di imparare ed utilizzare questo nuovo sistema!

Javascript e DOM – gestione di contenuti dinamici

Dal suo avvento nella storia dello sviluppo Web Javascript ha dato agli sviluppatori diversi problemi legati alla compatibilità dei browser anche per script di natura abbastanza semplice.

Questo problema è stato in parte risolto con l’avvento del DOM ovvero Document Object Model (modello per gli oggetti di un documento) di Javascript che tende a “mettere un po tutti daccordo”.

AJAX non sfugge a questa legge e, per quanto il DOM fornisca grande tranquillità allo sviluppatore, come vedremo in seguito è necessario usare delle accortenze nella redazione delle librerie Javascript legate ad AJAX e controllare il tipo di browser in uso.

Lo scopo di questo capitolo, comunque, è quello di introdurre i principali argomenti Javascript legati ad AJAX in fase di restituzione dei dati richiesti.

Ipotiziamo un elemento di testo HTML che fungerà da area di restituzione di un risultato:

<div id="risultato"></div>

Vediamo come agire con Javascript per impostare un testo predefinito:

<script type="text/javascript">
window.onload = function()
{
    var testo = document.getElementById("risultato");
    testo.innerHTML = "Hello, World!";
}
</script>

Si tratta di uno script molto semplice ma è importante comprenderne infondo il meccanismo per entrare a pieno nella forma-mentis di AJAX.

Al caricamento della pagina (non importa come lo si imposta, basta che lo si consideri un evento) si recupera l’elemento HTML attraverso il suo ID utilizzando il metodo getElementById dell’oggetto document e si imposta un valore grazie alla proprietà di lettura e scrittura innerHTML.

Questa breve ma doverosa premessa, che per molti non sarà altro che una ripetizione, tornetà molto utile successivamente in fase di redazione dell’esempio della guida di interazione tra AJAX e diversi linguaggi di scripting lato server.

Gli oggetti XMLHttpRequest ed XMLHTTP

Lo scopo degli oggetti XMLHttpRequest ed XMLHTTP, che in qualche modo sono l’uno sinonimo dell’altro, è quello di esaudire una richiesta HTTP remota basata su XML.

Vedremo che comunque AJAX non si basa solo su documenti XML ma si limita ad attingere dati da una fonte che per eccellenza è il formato XML, ma si può trattare di un file di testo, di un formato Excel, di un database o di un semplice array, che sarà proprio la base dell’esempio della guida.

Seguiranno, naturalmente, tutorial pratici in cui vedremo come interagire con tutti questi formati e come creare applicazioni pratiche basate su AJAX.

Chiusa questa parentesi di natura informativa sul “futuro”, torniamo allo scopo del capitolo.

XHLHTTP è un oggetto molto meno recente di XMLHttpRequest ma le funzionalità sono le stesse, anche se i nomi di proprietà e metodi cambiano e possono avere potenziale più o meno differente.

Le principali proprietà di entrambi, comunque, sono le seguenti:

• readyState – Verifica lo stato di un oggetto e può assumere valori da 0 a 4 dove: 0 = Uninitialized: l’oggetto esiste ma non è stato istanziato; 1 = Open: l’oggetto è aperto; 2 = Sent: la richiesta è stata inviata; 3 = Receiving: i dati stanno arrivando a destinazione; 4 = Loaded: operazione completata.

• responseText – restituisce il risultato di una richiesta HTTP in formato testuale.

• responseXML – restituisce il risultato di una richiesta HTTP in formato XML.

• status – restituisce lo stato di una transazione; contiene decine di numeri di successo e di errore che sono simili a quelle di un Web Server, ovvero esiste 404 (File Not Found), 500 (Internal Server Error) e cosi via.

Vediamo adesso i principali metodi:

• abort – termina preventivamente la richiesta HTTP.

• getResponseHeaders – restituisce le intestazioni della richiesta.

• open – apre la richiesta.

• send – invia la richiesta.

• setRequestHeader – imposta le intestazioni della richiesta.

Focalizziamo un attimo l’attenzione sul metodo “open” e vediamo, in un esempio puramente sintattico, quali sono i parametri che accetta:

oggetto.open(metodo, url, asincrono, username, password);

dove per metodo si intende il metodo di invio e relativa ricezione dei dati, ovvero GET o POST; la URL è quella del documento XML o quel che sia che si sta richiedendo; asincrono è un valore booleano ed accetta i valori ture o false ed username e password sono valori opzionali che vanno specificati solo se il documento è esplicitamente protetto.

Un esempio AJAX: il codice HTML e Javascript

Abbiamo introdotto AJAX, il suo funzionamento, la filosofia con la quale si colloca nell’ambito di un’applicazione Web e le tecnologie coinvolte, ragion per cui è giunta l’ora di vedere un esempio pratico!

Quel che andiamo a creare è un motore di ricerca di natura molto semplice che, stesso in fase di scrittura della parola chiave cercata, quindi all’evento onkeyup della casella di testo, restituisce dei suggerimenti utili all’utente, i cui dati sono conservati in un array lato server creato col linguaggio “di turno”, nei nostri casi ASP, ADP.NET e PHP i cui codici sono presenti nei prossimi tre capitoli.

Iniziamo dal codice HTML dell’applicazione, il file ajax.html, che sarà standard per l’esempio con i tre linguaggi:

<form> 
    Cerca un nome:<br>
    <input type="text" onkeyup="Richiesta(this.value)">
</form>

<div id="risultati"></div>

Nient’altro che un modulo HTML che richiama la funzione Javascript “Richiesta()” e presenta un elemento testuale HTML in cui compariranno i risultati.

Richiamiamo poi nel file HTML il codice Javascript con l’inclusione che segue:

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

che consiglio di anteporre al codice HTML del modulo.

Passiamo al codce Javascript del file ajax.js:

var XMLHTTP;

function Richiesta(Stringa)
{
    if (Stringa.length > 0)
    {
        var url = "ajax.<strong>ext</strong>?nome=" + Stringa.toUpperCase();
        XMLHTTP = RicavaBrowser(CambioStato);
        XMLHTTP.open("GET", url, true);
        XMLHTTP.send(null);
    }
    else
    {
        document.getElementById("risultati").innerHTML = "";
    } 
}

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

function RicavaBrowser(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!");
    }
}

Abbiamo tre funzioni legate tra loro. La prima, “Richiesta()”, si occupa di ricevere, processare ed inviare la richiesta. Attenzione alla riga relativa alla variabile che rappresenta la URL a cui inviare la richiesta:

var url = "ajax.<strong>ext</strong>?nome=" + Stringa.toUpperCase();

perchè a seconda del linguaggio lato server che utilizzeremo dovremo specificare la relativa estensione del file:

ASP = .asp
ASP.NE = .aspx
<a href="/php/guida-php/">PHP</a> = .php

La seconda funzione, “CambioStato()”, gestisce l’evento a cui è associato il richiamo della funzione precedente e di offrire l’output alla terza funzione, “RicavaBrowser()” (premesso che lo stato della richiesta sia completato), la quale verifica il browser corrente ed invia materialmente il risultato sulla pagina.

Tuttavia questo codice, sia pur completo in quanto codice Javascript, non è sufficiente a gestire da solo l’applicazione, dato che gli output ed i dati si trovano materialmente nella pagina lato server, di cui parlano i prossimi tre capitoli.

Un esempio AJAX: versione ASP

In funzione della struttura AJAX vista nel capitolo precedente, vediamo un esempio di codice ASP che offra un supporto dati ed un output all’applicazione, al fine di renderla completa.

Per prima cosa modifichiamo il file ajax.js impostando il file ajax.asp come fonte da cui attingere i dati relativi alla richiesta HTTP:

var url = "ajax.<strong>asp</strong>?nome=" + Stringa.toUpperCase();

Segue il codice ASP:

<%@LANGUAGE = VBScript%>
<%
    Dim nomi(9), nome, i, risultato

    nomi(1) = "Alessandro"
    nomi(2) = "Alessio"
    nomi(3) = "Claudio"
    nomi(4) = "Davide"
    nomi(5) = "Dario"
    nomi(6) = "Francesco"
    nomi(7) = "Giancarlo"
    nomi(8) = "Luca"
    nomi(9) = "Luigi"

    nome = Request.QueryString("nome")

    If Len(nome) > 0 Then
        risultato = ""
        For i = 1 To UBound(nomi)
            If nome = UCase(Mid(nomi(i), 1, Len(nome))) Then
                If risultato = "" Then
                    risultato = nomi(i)
                Else
                    risultato = risultato & ", " & nomi(i)
                End If
            End If
        Next
    End If 

    If risultato = "" Then 
        Response.Write "Nessun risultato..."
    Else
        Response.Write risultato
    End If
%>

Il funzionamento è semplice: imposto l’array che fa da fonte di dati, recupero la querystring che rappresenta la parola chiave ricercata, estraggo a runtime i dati corrispondenti ed offro un risultato oppure un messaggio di insuccesso.

Il funzionamento delle versioni ASP.NET e PHP dell’esempio è analogo sia pur implementato con la sintassi e gli oggetti dei rispettivi linguaggi, ragion per cui non lo ripeterò.

Un esempio AJAX: versione ASP.NET

Passiamo ora alla versione ASP.NET che fa da fonte dati ed output della struttura AJAX in precedenza.

Per prima cosa modifichiamo il file ajax.js impostando il file ajax.aspx come fonte da cui attingere i dati relativi alla richiesta HTTP:

var url = "ajax.<strong>aspx</strong>?nome=" + Stringa.toUpperCase();

Segue il codice ASP.NET redatto in VB.NET:

<%@Page Language="VB"%>
<script runat="server">
    Sub Page_Load
        Dim nome As String = Request.QueryString("nome")
        Dim i As Integer = 1
        Dim risultato As String = ""

        Dim nomi(9)
        nomi(1) = "Alessandro"
        nomi(2) = "Alessio"
        nomi(3) = "Claudio"
        nomi(4) = "Davide"
        nomi(5) = "Dario"
        nomi(6) = "Francesco"
        nomi(7) = "Giancarlo"
        nomi(8) = "Luca"
        nomi(9) = "Luigi"

        If Len(nome) > 0 Then
            risultato = ""
            For i = 1 To UBound(nomi)
                If nome = UCase(Mid(nomi(i), 1, Len(nome))) Then
                    If risultato = "" Then
                        risultato = nomi(i)
                    Else
                        risultato = risultato & ", " & nomi(i)
                    End If
                End If
            Next
        End If 

        If risultato = "" Then 
            Response.Write("Nessun risultato...")
        Else
            Response.Write(risultato)
        End If
    End Sub
</script>

Un esempio AJAX: versione PHP

Vediamo, infine, la versione PHP che fa da fonte dati ed output della struttura AJAX in precedenza.

Per prima cosa modifichiamo il file ajax.js impostando il file ajax.php come fonte da cui attingere i dati relativi alla richiesta HTTP:

var url = "ajax.<strong>php</strong>?nome=" + Stringa.toUpperCase();

Segue il codice PHP:

<?
    $nomi[0] = "Alessandro";
    $nomi[1] = "Alessio";
    $nomi[2] = "Claudio";
    $nomi[3] = "Davide";
    $nomi[4] = "Dario";
    $nomi[5] = "Francesco";
    $nomi[6] = "Giancarlo";
    $nomi[7] = "Luca";
    $nomi[8] = "Luigi";

    $nome = $_GET["nome"];

    if (strlen($nome) > 0)
    {
        $risultato = "";
        for ($i = 0; $i < count($nomi); $i++)
        {
            if (strtoupper($nome) == strtoupper(substr($nomi[$i], 0, strlen($nome))))
            {
                if ($risultato == "")
                {
                    $risultato = $nomi[$i];
                }
                else
                {
                    $risultato .= ", " . $nomi[$i];
                }
            }
        } 
    } 

    if ($risultato == "")
    {
        echo "Nessun risultato...";
    }
    else
    {
        echo $risultato;
    }
?>