Come creare applicazioni interattive con Ajax

Ajax è una tecnica di programmazione che consente lo sviluppo di RIA (Rich Internet Application).
Le RIA sono applicazioni web caratterizzate da grande interattività e velocità di esecuzione.
L’elaborazione dei dati avviene a livello client (browser) e le chiamate al server avvengono in “background” in modo asincrono (Ajax sta per Asynchronous JavaScript and XML).

Cosa significa in parole povere che lo scambio dati tra client e server avviene in background?

Vuol dire che lo scambio dati tra client e server permette l’aggiornamento dinamico della pagina web senza che quest’ultima venga ricaricata e senza dover richiamare una nuova pagina ma, soprattutto, è da sottolineare che non bisogna attendere che sia stata ultimata la richiesta per poterne effettuare altre.

Ajax non è un linguaggio di programmazione ma un insieme di tecnologie, vediamo quali sono:

Creare delle applicazioni interattive con Ajax

di Emanuele Calì

Tornando a parlare delle varie tecnologie di cui Ajax è composto ecco quali sono:

1. HTML/XHTML/CSS per il markup;
2. DOM (Document Object Model) manipolato attraverso un linguaggio ECMAScript come JavaScript;
3. XMLHttpRequest per lo scambio asincrono dei dati tra client e server;
4. XML come formato per lo scambio dati. Non è obbligatorio e al suo posto si può scegliere un altro formato come JSON o anche semplice testo.

Le applicazioni web che fanno uso di Ajax necessitano di browser di ultima generazione che supportino tale tecnologia.

Tutti i principali browser come FireFox, Internet Explorer, Google Chrome, Opera e Safari supportano Ajax ma è buona norma testare i propri applicativi per verificare la compatibilità.

Abbiamo detto che le chiamate Ajax avvengono in background e, ottenuta la risposta, viene modificata solo una porzione della pagina (di solito un elemento HTML come il DIV).
Questo potrebbe anche rappresentare un problema per l’utente che, una volta effettuata la chiamata, vede la pagina web “immobile” ignaro che la richiesta di informazioni è comunque stata inviata al server.

Per ovviare a questo problema è opportuno dedicare un elemento della pagina (un div è sicuramente indicato) alla descrizione dell’interazione. Questo si può realizzare con un semplice testo o con un loader (magari una GIF come quelle scaricabili da ajaxload.info) che “visivamente” mostra all’utente che è in corso uno scambio dati.

Vediamo tecnicamente come possiamo modificare dinamicamente il contenuto di una pagina web tramite il metodo innerHTML del DOM.

Supponiamo che nella nostra pagina web ci sia un div con ID univoco “content”:

<div id=”content”>
Mio div
</div>

Possiamo modificare il contenuto del div utilizzando la seguente funzione:

function modifica() {
document.getElementById(“content”).innerHTML =
“Contenuto del div modificato”;
}

Richiamiamo la funzione tramite un button:

<input type=”button”
value=”Modifica” onclick=”javascript:modifica()” />

Modificando dinamicamente lo stile del div possiamo inventarci una funzione che mostri o nasconda il suo contenuto:

function hideshow() { 

var element = document.getElementById("content");

if (element.style.visibility == 'hidden') {

element.style.visibility = 'visible';

element.style.display = 'block';

} else {

element.style.visibility = 'hidden';

element.style.display = 'none';

}

}

Richiamiamo la funzione con un altro button:

<input type="button" value="Hide/Show"
onclick="javascript:hideshow()" />

Adesso vediamo come realizzare una interazione “avanzata” inviando una richiesta ad una pagina server-side (nel nostro esempio scritta in PHP) ed ottenendo una risposta in formato testo.

Vediamo prima la pagina PHP (file.php):

<?php

$utente = $_GET['utente'];

if ($utente=="rossi") echo "Salve sig. Rossi";

else echo "Non ti conosco";

?>

La pagina riceve una variabile “utente” in modalità GET e controlla che il suo contenuto sia “rossi”. In caso affermativo stampa la frase “Salve sig. Rossi” altrimenti la frase “Non ti conosco”. La risposta verrà inserita nel div con ID univoco “content” tramite Ajax:

var ajax = initAjax();

if (ajax) {

ajax.open("get", "file.php?utente=" + utente, true);

ajax.setRequestHeader("connection", "close");

ajax.onreadystatechange = function() {

var response="";

if (ajax.readyState == 0) response =
"Inizializzazione in corso..."; 

if (ajax.readyState == 1) response =
"content","Connessione avviata...";

if (ajax.readyState == 2) response =
"content","Invio dati in corso..."; 

if (ajax.readyState == 3) response =
"content","Ricezione dati in corso..."; 

if (ajax.readyState == 4 && ajax.status==200) {

response = ajax.responseText;

} 

else response =
"Operazione fallita! Errore numero " + ajax.status;

document.getElementById("content").innerHTML = response;

} 

ajax.send(null);

} 

else alert('Ajax non supportato!');

Dopo aver inizializzato l’oggetto Ajax (potete visionare il codice completo nei files a corredo dell’articolo) che, tra l’altro, ci permette di verificare che Ajax sia supportato dal browser, abbiamo effettuato la chiamata asincrona inviando il contenuto della variabile utente e ricevendo una risposta che abbiamo scelto di memorizzare nella variabile response.

Tutto questo servendoci del metodo Open (il cui terzo parametro impostato su true specifica che la chiamata è asincrona) e successivamente del metodo Send.

Niente di troppo complicato ma soffermiamoci un attimo sulla funzione onreadystatechange.

Questa funzione si preoccupa di controllare lo stato dell’interazione restituendo un numero intero (readyState) che identifica in ogni istante lo stato della richiesta.

Nel caso avessimo voluto effettuare la richiesta in POST avremmo dovuto modificare lo script nei metodi Open e Send e specificare tramite headers i valori da inviare.

ajax.open
("post", "file2.php", true);

ajax.setRequestHeader
("content-type", "application/x-www-form-urlencoded");

ajax.send
("utente=" + utente);

Richiamando il file PHP file2.php:

<?php

$utente = $_POST['utente'];

if ($utente=="rossi") echo "Salve sig. Rossi";

else echo "Non ti conosco";

?>

Se hai delle domande o curiosità lascia pure un commento

Scarica i files dell’articolo

Articolo pubblicato per blographik da Emanuele Calì di EmaWebDesign.com.