AJAX ed i suoi fratelli - L2

Con questo post, comincio una serie di indicazioni per chi comincia con la programmazione. Saranno pagine senza pretese, utili più che altro per partire, anzi per decidere con cosa partire. Se leggendo qui, qualche programmatore junior (non sottointende l'età :-) potrà prendere meglio una decisione (studio il PHP? Cosa faccio per fare un sito? E così via), allora non sarà stato spazio sprecato! Nel titolo comparirà il livello della nota: L1 indica qualcosa per chi comincia, L2 per chi comincia quasi a prendersi sul serio :-) Le chiavi di ricerca conterranno sempre la parola "tecnica".

Tra gli strumenti web che Google mette a disposizione gratis, avrete forse provato Gmail, la posta web. Avete allora certamente notato come la consultazione risulti molto rapida e, forse, avete fatto caso che le pagine non sembrano caricarsi ogni volta. Bene: non si tratta che il caricamento della pagina è talmente veloce che non si vede, ma che proprio non avviene! In altre parole, avete sperimentato un effetto di AJAX.
Intanto, che vuol dire? Javascript e XML Asincroni (Asynchronous Javascript And XML). Detto in altro modo: non stiamo parlando di un altro linguaggio o di un nuovo tipo di server; si tratta solo di sfruttare a fondo alcune caratteristiche del linguaggio di scripting Javascript, che oggi ogni browser supporta. Suggerita da Google nel 2005, è una tecnica di programmazione web che permette di costruire siti e applicazioni più veloci ed anche più facili da usare.
Supponiamo infatti di avere una pagina con un po' di testo e due tabelle costruite pescando da un database, costruite usando PHP o ASP. Quando l'utente fa una certa azione, una tabella deve cambiare: per esempio perché introduciamo un filtro sui risultati oppure semplicemente vogliamo ordinarla. Nella programmazione normale, questo significa ricaricare tutta la pagina, cioé ricostruirla da zero, magari per cambiarne meno di un quarto.
Con il metodo AJAX, l'unica parte ad essere ricostruita è la tabella in gioco: il resto della pagina non viene ricaricato, con grande vantaggio in termini di tempo e di carico di rete. Inoltre, l'interfaccia utente è più amichevole, in quanto cambia solo la parte della pagina con cui si sta interagendo, tutto il resto è immobile. Proprio come succede con una applicazione non web, risiedente sulla macchina dell'utente finale. Provate ad andare nella Posta in Arrivo di Google, selezionate un messaggio e premete il tasto Elimina: immediatamente il messaggio scompare, senza attendere il rinfresco della pagina. Un altro esempio tipico ma ancora più notevole è rappresentato dai suggerimenti: mentre si scrive in un campo di testo, ad ogni lettera inserita viene interrogato il database e compare un suggerimento, per esempio tramite menu a discesa. Se si dovesse ricaricare l'intera pagina, scrivere sarebbe veramente difficile.
Come detto, si tratta solo di una tecnica di programmazione, non c'è nulla che non esistesse già prima. Si tratta di usare le proprietà di un oggetto Javascript, chiamato XMLHttpRequest. Allo scattare della richiesta di azione (p.es. alla pressione di un tasto), l'oggetto viene creato, vengono settate alcune sue caratteristiche e si spedisce la richiesta al server, indicando cosa deve essere fatto. Il server risponde tramite lo stesso oggetto, che stavolta contiene il risultato; tale risultato sarà trattato come si conviene, di solito direttamente inserito in qualche elemento della pagina, per esempio nella tabella. Il browser, usando i CSS della pagina, presenterà all'utente il rinfresco della zona interessata, senza minimamente cambiare le altre parti della pagina.
Nelle prossime puntate, vedremo come creare l'oggetto e come colloquiare con il server. Nel frattempo, potete girare per il web e scoprire chi sta usando questa tecnica di programmazione, osservando come avviene il rinfresco della pagina. Vi anticipo che anche Yahoo! non scherza per quel che riguarda AJAX!