dal 2015 - visita n. 1541
Ajax
Ajax

 

Introduzione

Per gli informatici, Ajax non è nè una squadra di calcio, nè un detersivo, nè il leggendario eroe dell'Iliade di Omero.
AJAX (acronimo di Asynchronous JAvascript and Xml) è un gruppo di tecniche di sviluppo per il Web utilizzate sul lato client per creare applicazioni Web asincrone. Grazie a queste tecniche, le applicazioni web possono scambiare dati con un server in modo asincrono (in background) senza interferire con la visualizzazione ed il comportamento della pagina esistente.
I dati possono essere recuperati utilizzando l'oggetto XMLHttpRequest.
Nonostante sia presente nell'acronimo, invece, l'uso di XML non è necessario e le richieste non hanno bisogno di essere asincrone.
HTML e CSS possono, naturalmente, essere usati in combinazione per la creazione dei contenuti e dello stile.

In estrema sintesi Ajax è, dal punto di vista tecnico, l'unione di due caratteristiche:

Molto spesso si parla di Ajax anche quando viene utilizzata una soltanto di queste due caratteristiche.
Vediamo, tanto per cominciare, la prima di queste caratteristiche, servendoci di un paio di esempi concreti che servono a dimostrare cosa si intende per aggiornamento in tempo reale di una pagina.



Esempio A

Finchè la barca va...


Premendo sul pulsante Rispondi il testo della domanda verrà sostituito con una risposta. Mentre premendo sul pulsante Reset si tornerà alla situazione di partenza.
Esaminiamo, allora, il codice Html dell'Esempio A:

Il messaggio viene identificato come elemento tramite il tag DIV id=playA, mentre ai 2 pulsanti vengono associate le funzioni Javascript script1 e script2, definite qui di seguito.

A parte il testo del messaggio, le 2 funzioni sono praticamente identiche. In esse vengono svolte 2 operazioni:

La funzione document.getElementById("playA") restituisce un riferimento all'elemento della pagina che ci interessa modificare. L'oggetto in questione ha una proprietà chiamata innerHTML che può essere letta/scritta. Se viene letta restituisce il codice HTML presente dentro il DIV, se viene scritta, impostandola a qualcosa di diverso, come avviene nell'ultima riga delle funzioni, provoca il cambiamento del contenuto del DIV.



Esempio B

Messaggio Fantasma


Premendo ripetutamente sul pulsante ON/OFF il messaggio perde e riacquista la sua collocazione nella pagina.
Esaminiamo, allora, il codice Html dell'Esempio B:

Il messaggio viene identificato come elemento tramite il tag DIV id=playB, mentre al pulsante viene associata la funzione Javascript script3, definita qui di seguito.

La funzione preleva, dapprima, l'elemento interessato tramite getElementById, come nel caso precedente.
Poi utilizza 2 proprietà dell'oggetto per effettuare le commutazioni:

Tutta la soluzione funziona, praticamente, sfruttando le proprietà dei CSS, e quindi una loro buona conoscenza diventa sempre più importante con l'evolversi degli strumenti per la programmazione del web.


















Introduzione



I molti spicciano piu' lentamente gli affari.
Lehmann

Valid CSS!
pagina generata in 0.001 secondi