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:
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"; ?>
Fonte: Come creare applicazioni interattive con Ajax
]]>JSON, è un formato di scambio dati che utilizza la notazione letterale fornita da JavaScript per rappresentare dati strutturati. È a tutti gli effetti un sottinsieme del linguaggio JavaScript. Esso permette l’uso di dati che vengono interpretati direttamente come oggetti JavaScript o come array.
A differenza di XML, JSON fa uso di primitive ben supportate dai browser più comuni che ne rendono estremamente efficiente la gestione.
Tutto ciò risulta molto comodo in Ajax, dove lo spreco di banda ed il parsing delle response sono sempre cruciali.
Ovviamente JSON è completamente indipendente dal tipo di linguaggio di programmazione utilizzato. Inoltre è ampliamente supportato dalla maggior parte dei linguaggi di programmazione grazie alla disponibilità di numerose librerie.
I dati che si possono rappresentare in JSON sono di tipo:
object: ovvero una collezione di coppie chiave:valore separate da virgola e racchiusi all’interno di parentesi graffe. (ad es. { “nome” : “pinco”, “cognome” : “pallino” } )
array: sequenza ordinata di valori separati da virgola (ad esempio “email” : [ “pincopallino@pippo.it”, “pluto@pippo.it” ] )
value: un singolo valore che può essere una stringa racchiusa tra virgolette, oppure un number, un object, un array o un boolean.
Vediamo ora un esempio di testo in formato JSON:
{“person”: {
“personalData”: {
“firstName”: ”pinco”,
“lastName” : ”pallino”,
“email” : ”pincopallino@pippo.it”,
“phones” : [ “123456789”, “123456789”, “7777777777”]
“age” : 18
}
}
Abbiamo un oggetto root “person” e un oggetto nodo “personalData”. Quest’ultimo a sua volta contiene (come da definizione di oggetto JSON) delle coppie chiave:valore. Notiamo che la chiave “phones” in realtà è un array, quindi una sequenza di valori.
JSON e JavaScript
Ora supponiamo di aver ricevuto dal server il testo dell’esempio precedente e supponiamo di volerlo “parsare” tramite JavaScript. Per fare questo basterà semplicemente usare la funzione JavaScript eval() come segue:
var myObject = eval(’(’ + myJSONtext + ‘)’);
Se ad esempio volessimo recuperare il valore del campo “email” contenuto all’interno del testo basterà usare la sintassi myObject.person.personalData.email.
Bisogna però stare attenti al fatto che eval() esegue qualsiasi codice JavaScript gli venga passato.Di conseguenza l’uso di questa funzione è indicato solamente quando sappiamo che la sorgente del messaggio è sicura. Inoltre non è detto che il messaggio JSON ricevuto sia valido.
Per questo è meglio usare un JSON parser come segue:
var myObject = JSON.parse(myJSONtext, reviver);
dove il parametro opzionale reviver è una funzione che verrà eseguita per ogni coppia chiave:valore.
Ogni valore sarà sostituito dal valore restituito dalla funzione reviver.
Il JSON parser fornito da questa libreria accetta solo testi in formati JSON, quindi niente script maliziosi!
Date le sue caratteristiche è opportuno penare non resta che chiedersi quale formato di interscambio è preferibile usare nelle nostre applicazioni.
Ovviamente tutto dipende dal contesto e dai requisiti dell’applicazione stessa e valutare poi, quanto un certo formato piuttosto che un altro sia supportato dal linguaggio di programmazione usato.