Blogrammazione

Ajax ( Asynchronous JavaScript and XML ) è una tecnica di sviluppo web che ha lo scopo di proporre interattivà senza tuttavia dover ricaricare la pagina ad ogni interazione con l’utente. In sostanza, Ajax permette attività in backgroud rispetto ad eventi principali: un esempio tipico di utilizzo di questa tecnica è l’aggiornamento dinamico di elenchi, per esempio utilizzato ultimamente nei social networks. Mentre l’utente può scorrere le notizie e qundi interagire con la pagina, l’elenco delle news inserite si autoaggiorna senza tuttavia dover attedere che sia l’utente stesso ad effettuare l’aggiornamento della pagina.

Questa tecnica ha ormai aperto le porte a nuove tipologie di applicazioni, sempre più interattive e sempre più accattivanti. Ma come funziona Ajax? Ecco un esempio passo-passo di utilizzo di queste tecnologie: i commenti si possono leggere direttamente sul codice, in modo da facilitare la comprensione e velocizzare l’apprendimento. Supponiamo che questo codice sia contenuto in un file
“ajax1.js” :

/*
Questa è la funzione principale di creazione: si crea la variabile obj che conterrà il riferimento all’oggetto XMLHttpRequest l’oggetto principale su cui si agisce. Per garantire la compatibilità viene eseguito un controllo sul tipo di browser, visto che a seconda della tipologia l’oggetto obj viene creato in modi diversi. Se il browser è “non - Internet Explorer”, allora si utilizza la funzione XMLHttpRequest altrimenti se il browser è Internet Explorer si utilizza ActiveXObject(”Microsoft.XMLHTTP”). Questa differenza ha una base teorica, che non trattiamo in questa sede, occupandoci qui di “pura pratica”. Se volete approfondimenti scriveteci, e provvederemo ad esaudire le vostre richieste!

*/
function createXHR() {
var obj;
if (window.XMLHttpRequest) { // Non Internet Explorer
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Internet Explorer
obj = new ActiveXObject(”Microsoft.XMLHTTP”);
}
return obj;
}

obj=createXHR();

/*Questa è la funzione che gestisce e analizza lo stato dell’applicazione: si procede innanzittutto con dei controlli, che possiamo fare analizzando lo stato dell’oggetto obj precedentemente istanziato. Se durante il cambiamento si stato dell’oggetto obj non si sono verificati errori, allora le funzioni readyState e status ritorneranno rispettivamente i valori 4 e 200, valori che indicano appunto l’avvenuto caricamento con successo. A questo punto possiamo scrivere il codice che deve eseguire l’appilcazione per raggiungere il suo obiettivo. Nel nostro caso, una volta ricevuta la richiesta, la nostra piccola applicazione Ajax provvedrà a creare una select caricando il contenuto dinamicamente, cioè una select che cambia le opzioni in base ad una scelta fatta dall’utente ma senza il bisogno di ricaricare l’intera pagina.
*/
function onStateChange() { // Cambiamento Stato
if (obj.readyState == 4) { // Caricamento Avvenuto
if (obj.status == 200) { // con successo

var div = document.getElementById(’risultato’);
if ( document.uniqueID ) {
var select = document.createElement(”<select id=’district’ name=’district’ ></select>”);
} else {
var select = document.createElement(”select”);
}
select.setAttribute(”name”,”district”);
select.setAttribute(”id”,”district”);
select.setAttribute(”onchange”,”invia2();”);

list = new Array();
list1 = new Array();
list2 = new Array();

/*IMPORTANTE: tramite la proprietà responseText dell’oggetto obj è possibile recuperare valori prodotti dal file che si occupa di gestire la richiesta al server, per esempio il file che effettua una query e che nel nostro caso è xmlHttpRequest.php*/
string = obj.responseText;

list = string.split(”;”);
list1 = list[0].split(”\n”);
list2 = list[1].split(”\n”);

for ( i=0; i < list1.length; i++ ) {
op = new Option(list2[i], list1[i]);
select.options[i] = op;
}
document.getElementById(”risultato”).innerHTML=”";
div.appendChild(select);

} else {
document.getElementById(”risultato”).innerHTML=”?”;
alert(”Errore: “+obj.statusText);
}
}

}

/*La funzione invia() è quella da cui inizia l’attività: infatti questa funzione non fa altro che inviare alla funzione inviaXHR() il riferimento all’oggetto obj e il link del file di gestione
*/
function invia() {

inviaXHR(obj,”http://link_pagina/xmlHttpRequest.php”);
}

/*Questo è il cuore dell’applicazione: attraverso una richiesta POST, inviamo con la funzione send() i dati al file xmlHttpRequest.php, che potrà svolgere il suo compito indipendentemente dalle altre interazioni che l’utente potrà avere con la pagina. Nel nostro caso, supponiamo che in questo file ci sia il codice per effettuare una query al database, e che con i risultati ottenuti si crei l’insieme delle opzioni che andranno a “riempire” la select di cui sopra. Supponiamo di aver creato una stringa in cui ogni attributo value dell’opzione è separato dal valore visibile dal carattere “|”, cioè:

value|Valore visibile ->>> <option value=’value’>Valore visibile</option>

*/
function inviaXHR(obj,url) {
try {
// Preparazione comunicazione
obj.open(”POST”, url, true);

// caricamento in corso…fornisce il feedback all’utente
document.getElementById(”risultato”).innerHTML=”caricamento in corso…”;
obj.setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded’);

//richiamiamo la funzione onStateChange analizzata precedentemente
obj.onreadystatechange = onStateChange;

/*IMPORTANTE: a seconda del valore country possiamo gestire la select
che vogliamo creare, e quindi possiamo aggiornarla in base a determinati valori che vengono assegnati a country
*/
country=escape(document.myform.country.value);

//Inviamo al file di gestione .php alcuni parametri, attraverso il metodo POST
obj.send(”country=”+country); // Trasferimento

} catch (e) {

/*
Se si verificano problemi, l’elemento HTML che doveva diventare una select verrà sostituiro con un ?, che indica appunto il verificarsi di errori o problemi
*/
document.getElementById(”risultato”).innerHTML=”?”;
alert(”Errore: “+e);
}

}

Per chi avesse le idee ancora confuse, riassumiamo brevemente ciò che succede.

1. Creaimo l’oggetto obj.
2. Supponiamo di cliccare su un pulsante che richiama la funzione javascript “invia()”; attiviamo così una richiesta al server.
3. Tramite la funzione inviaXHR gestiamo effettivamente la richiesta: il metodo utiliaazto è il POST (con cui possiamo inviare dati al file di gestione) e il file di gestione è xmlHttpRequest.php, che nel nostro caso è scritto in PHP ma che potrebbe essere scritto in un qualsiasi linguaggio di programmazione. La funzione send() ci permette di inviare parametri al file di gestione, parametri che vengono inviati attraverso il metodo POST, appunto.
4. Il file di gestione può fare qualsiasi cosa per svolgere il suo compito: supponiamo nel nostro caso che il file effettui una query al database e restituisca una stringa.
5. Viene richiamata la gestione di stato dell’oggetto, onStateChange, che analizza l’andamento della richiesta che abbiamo effettuato. Se tutto è andato bene, recuperiamo attraverso la proprietà responseText dell’oggetto obj la stringa prodotta dal file di gestione. Possiamo lavorare sulla stringa restituita, creando ad esempio una select con delle option che dipendono dal valore di un parametro scelto dall’utente, nel nostro caso country.

Tutto questo lavoro viene svolto in background, senza che l’utente di accorga di nulla, ma soprattutto permettendo all’utente di continuare ad interagire con la pagina liberamente e come se nulla stia accadendo.

Questo articolo è stato pubblicato Lunedì, 21 Gennaio 2008 alle 10:45 e classificato in AJAX, Javascript, PHP. Puoi seguire i commenti a questo articolo tramite il feed RSS 2.0. Puoi inviare un commento, o fare un trackback dal tuo sito.