XML/AJAX

Obiettivi di apprendimento

Comprendere che cos'è AJAX e a cosa serve
Conoscere le componenti principali di AJAX

AJAX è una delle parole più usate nell'era del Web 2.0. Mentre le sue origini storiche non sono molto chiare (una simile logica per manipolare le parti di una pagina web era già stata pensata per il DHTML, molto prima che il termine AJAX esistesse), è oggi una delle più importanti tecnologie utilizzate dai moderni webdesigner.

Ma cosa significa AJAX? In breve, AJAX è l'acronimo di Asynchronous JavaScript and XML. Descrive un concetto di trasferimento asincrono dei dati (intesi qui come dati incapsulati in XML) tra il client (di solito un browser web) e un server solo per scambiare/modificare una parte della pagina web senza la necessità di un pagereload completo. Ciò significa che il browser invierà un XMLHttpRequest in background e riceverà solo una parte della pagina, solitamente associata a uno o più tag html contenenti gli uid.

Componenti principali

I componenti principali del modello di programmazione AJAX sono:

JavaScript: il linguaggio di scripting più popolare del Web e supportato da tutti i principali browser. Le applicazioni AJAX sono costruite in JavaScript.
Document Object Model (DOM): definisce la struttura di una pagina Web come un insieme di oggetti programmabili. Nella programmazione AJAX, il DOM ci consente di ridisegnare parti della pagina.
Cascading Style Sheets (CSS): fornisce un modo per definire l'aspetto grafico degli elementi in una pagina web.
XMLHttpRequest: consente a uno script sul lato client di eseguire una richiesta HTTP, eliminando in modo efficace un aggiornamento o postback a pagina intera nelle applicazioni AJAX.
XML: a volte viene utilizzato come formato per il trasferimento di dati tra server e client, ma funzionano anche altri formati basati su testo.

Vantaggi

AJAX offre una serie di vantaggi. Alcuni dei più importanti sono:

Minore domanda di larghezza di banda: il fatto che non sia necessario ricaricare completamente una pagina quando vengono richieste informazioni aggiuntive consente di ridurre al minimo il trasferimento dei dati. Anche la richiesta di larghezza di banda viene ridotta producendo HTML localmente all'interno del browser. Tuttavia, dato che abbiamo un sovraccarico aggiuntivo prodotto dall'incorporazione di JavaScript, questo è vero solo nel caso di più di una o due richieste di pagine dallo stesso sito.
Il plug-in del browser non è necessario: AJAX viene eseguito con tutti i browser che supportano JavaScript. Non è necessario alcun plug-in aggiuntivo. Questo è un vantaggio rispetto a tecnologie come Shockwave o Flash. In alcuni casi tuttavia è possibile che alcuni browser si comportino in modo diverso.
Siti web più user-friendly: grazie al trasferimento dati ridotto la risposta alle azioni dell'utente è molto più veloce. Inoltre, le interfacce create con AJAX possono essere più user-friendly.

Classic RequestResponse vs. AJAX Cycle

Il ciclo AJAX incorpora un'ulteriore libreria JavaScript sul lato client. Questa è usata per comunicare con il server (nel caso sia in uso l'AJAX) e per manipolare la pagina HTML su cui è incorporata. Per un piccolo esempio, ora diamo un'occhiata al cosiddetto AutoComplete (diamo un'occhiata al processamento di base e saltando la manipolazione dettagliata di JS-DOM). L'approccio tradizionale, invece, richiede sempre un ciclo completo di richiesta-risposta che invia l'intera pagina dal server al browser.

Un semplice esempio: completamento automatico

Questo esempio mostra un semplice campo di testo AutoComplete dagli esempi wicket (wicket è un JavaWebFramework orientato ai componenti sotto il cofano dell'ASF^[1]). L'esempio è online,^[2] quindi non solo puoi seguire il codice ma anche vederlo in azione dal vivo.

L'idea alla base di un campo di testo AutoComplete è di aiutare gli utenti mostrando utili suggerimenti durante il riempimento del campo. Immagina di trovarti su amazon.com a cercare un prodotto "foo" e ne inserisci il nome nella barra di ricerca per poi scoprire che non esiste solo dopo averlo inviato: con un campo AutoComplete lo avresti saputo già dopo alcune lettere. Per avere un semplice esempio, ora guarderemo un singolo campo in cui è possibile inserire i nomi di paesi come "Inghilterra", "Germania" o "Austria".

L'HTML dietro di esso è piuttosto semplice; il codice JavaScript necessario viene fornito automaticamente da wicket:

...header contenente CSS + HTML-head escluso ...
Il campo di testo sottostante completerà automaticamente i nomi dei paesi. Utilizza AutoCompleteTextField nelle estensioni wicket.

        <form wicket:id="form">
            Country: <input type="text" wicket:id="ac" size="50"/>
        </form>
...footer escluso...

Al momento abbiamo quindi un semplice modulo con un semplice <input />. wicket:id serve solo per legarlo al codice Java e non ha alcun impatto su AJAX (infatti in modalità di produzione verrà rimosso).

Anche il codice Java non è troppo complicato:

public class AutoCompletePage extends BasePage
{
    /**
     * Crea AutoCompletePage
     */
    public AutoCompletePage()
    {
        Form form = new Form("form");
        add(form);

        final AutoCompleteTextField field = new AutoCompleteTextField("ac", new Model(""))
        {
            protected Iterator getChoices(String input)
            {
                if (Strings.isEmpty(input))
                {
                    return Collections.EMPTY_LIST.iterator();
                }

                List choices = new ArrayList(10);

                Locale[] locales = Locale.getAvailableLocales();

                for (int i = 0; i < locales.length; i++)
                {
                    final Locale locale = locales[i];
                    final String country = locale.getDisplayCountry();

                    if (country.toUpperCase().startsWith(input.toUpperCase()))
                    {
                        choices.add(country);
                        if (choices.size() == 10)
                        {
                            break;
                        }
                    }
                }

                return choices.iterator();
            }
        };
        form.add(field);

        ...qui ci sarebbe ulteriore codice Java, non necessario per questo esempio...

    }
}

Abbiamo qui una semplice pagina che riceve un form collegato. Il form d'altra parte contiene una versione in AJAX di un campo di testo. protected Iterator getChoices(String input) viene chiamato dopo aver premuto un tasto (inserendo un valore nel campo usando la tastiera) da una chiamata AJAX (lo vediamo oltre). Ciò significa che questa funzione è la rappresentazione della logica di business per AJAX. Qui controlla solo se abbiamo già qualcosa inserito, e in caso affermativo controlla se ci sono paesi esistenti che iniziano con le lettere già immesse (per esempio, se si inserisce in Aus troverà paesi come Austria e Australia).

La pagina web risultante sarà questa:

<html>
<head>
<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/

var clientTimeVariable = new Date().getTime();

/*-->]]>*/</script>


	...title + css stripped out...
       <script type="text/javascript" src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js"></script>
       <script type="text/javascript" src="resources/org.apache.wicket.ajax.WicketAJAXReference/wicket-ajax.js"></script>
       <script type="text/javascript" src="resources/org.apache.wicket.ajax.AbstractDefaultAJAXBehavior/wicket-ajax-debug.js"></script>
  
<script type="text/javascript" src="resources/org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteBehavior/wicket-autocomplete.js"></script>
<script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/
Wicket.Event.add(window, "domready", function() { new Wicket.AutoComplete('i1','?wicket:interface=:1:form:ac::IActivePageBehaviorListener:1:&amp;wicket:ignoreIfNotActive=true',false);;});
/*-->]]>*/</script>

</head>
<body>
    
   ...head stripped out...
    

		The textfield below will autocomplete country names. It utilizes AutoCompleteTextField in wicket-extensions.<br/><br/>

		<form action="?wicket:interface=:1:form::IFormSubmitListener::" method="post" id="i2"><div style="display:none"><input type="hidden" name="i2_hf_0" id="i2_hf_0" /></div>
			
			Country: <input value="" autocomplete="off" type="text" size="50" name="ac" onchange="var 
                        wcall=wicketSubmitFormById('i2', '?wicket:interface=:1:form:ac::IActivePageBehaviorListener:3:&amp;wicket:ignoreIfNotActive=true', null,null,null, function() 
                        {return Wicket.$$(this)&amp;&amp;Wicket.$$('i2')}.bind(this));;" id="i1"/>
		</form>

		
<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/

window.defaultStatus='Server parsetime: 0.0070s, Client parsetime: ' + (new Date().getTime() - clientTimeVariable)/1000 +  's';

/*-->]]>*/</script>

</body>
</html>

Quindi ora abbiamo il nostro html accompagnato da un gruppo di risorse JS (con il parser DOM, il trasformatore e così via), oltre ad avere impostato il comportamento del nostro campo <input> usando il metodo onchange="..." di JS.

Se ora inizi a inserire alcuni caratteri come "au" nel campo, l'evento onchange viene attivato e richiama il metodo wicketSubmitFormById(), che invia una chiamata al server e riceve il file XML:

1  INFO: focus set on i4
2  INFO:
3  INFO: Initiating AJAX GET request on ?wicket:interface=:1:form:ac::IActivePageBehaviorListener:1:&wicket:ignoreIfNotActive=true&q=au&random=0.9530900388300743
4  INFO: Invoking pre-call handler(s)...
5  INFO: Received ajax response (85 characters)
6  INFO:
<ul><li textvalue="Austria">Austria</li><li textvalue="Australia">Australia</li></ul>
7  INFO:

Nella riga 1 è stata impostata l'attenzione sul campo (qui con uid i4). Dopo aver inserito "au" nel campo della riga 3, viene inviata una richiesta AJAX al server. Le righe 4 e 5 illustrano i gestori di pre-chiamata e la ricezione della risposta AJAX. La riga 6 mostra il contenuto già decodificato della risposta, inserendo un <ul> con i due paesi previsti che iniziano con "au" e che ora sono posizionati dalle librerie di intestazione JS nella posizione appropriata sulla pagina.

Ora hai visto un piccolo, semplice esempio delle grandi potenzialità di AJAX. Per capirle davvero bisogna però usarlo nella realtà. Nella pagina http://wicketstuff.org/wicket13/ajax/ troverai molti altri esempi in esecuzione, tutti con codice.

Note

[1] ttp://wicket.apache.org/

[2] Vedi http://wicketstuff.org/wicket13/ajax/autocomplete

[1]

[2]