Oggi la maggior parte delle applicazioni web usa PHP come linguaggio di scripting lato server, ma il fenomeno che ha per molti versi rivoluzionato il web, tanto da far parlare di Web 2.0, si chiama Ajax. Come è noto, si tratta di una combinazione di Javascript, DOM e XMLHttpRequest a cui è affidato il compito dell'interazione asincrona tra client e server.
Per unire la potenza di queste due tecnologie ci viene in aiuto xajax, una libreria open source e object-oriented che è in grado di generare da una funzione PHP la corrispettiva funzione Javascript associabile ad eventi.
Vediamo in pochi semplici passaggi come funziona questa libreria:
- Il client richiama la funzione Javascript precedentemente generata da PHP.
- L'oggetto XMLHttpRequest viene istanziato ed invia una richiesta al server.
- L'oggetto xajax, lato server, riceve la richiesta HTTP e invoca la funzione PHP corrispondente alla funzione Javascript.
- Finita l'elaborazione, la funzione PHP restituisce al client, tramite l'oggetto xajax, la risposta in formato XML.
- La risposta aggiornerà in modo asincrono il contenuto della pagina web lato client.
Giunta alla versione 0.5 BETA 4 e scaricabile al seguente indirizzo http://xajaxproject.org/download.php, xajax, a differenza di altre librerie Ajax, operando in simbiosi con un linguaggio lato server come PHP, rende molto più veloce la realizzazione di script che eseguono molte operazioni server-side (per esempio l'interfacciamento con database).
Per davi un assaggio della potenza e della semplicità di questa libreria, ho realizzato un piccolo widget che implementa una barra di caricamento utile per monitorare il completamento di determinate procedure lato server.
Per capirci meglio ecco la demo. E vediamo insieme passo per passo il codice.
<?php
session_start();
//Includo la libreria per utilizzare il core di xajax
require ('xajax_core/xajax.inc.php');
// istanzio l'oggetto xajax
$xajax = new xajax();
// imposto il path per la cartella file js
$xajax->configure('javascript URI', '/esempi_HTML/loadingbar/');
//registro il nome di una funzione in php che voglio richiamare attraverso xajax
$xajax->registerFunction("loading");function loading($start)
{
// istanzio l'oggetto xajax response
$objResponse = new xajaxResponse();
if($start)
{
$_SESSION['contatore']=1;
$_SESSION['timestamp']=mktime();
$_SESSION['totElementi']=50;
}
$widthLoadingBar=500;
$percentualeAvanzamento = $_SESSION['contatore']/$_SESSION['totElementi'];
$percentualeVisual = $_SESSION['contatore']*100/$_SESSION['totElementi'];
$tempoAttuale = mktime();
$tempoTrascorso=$tempoAttuale-$_SESSION['timestamp'];
$elementiRimasti=$_SESSION['totElementi']-$_SESSION['contatore'];
$tempoMedioOperazione=$tempoTrascorso/$_SESSION['contatore'];
$tempoRimanente=$tempoMedioOperazione*$elementiRimasti;
//Visualliza informazioni temporali
$secondi = round($tempoRimanente);
$ore = sprintf("%02d",floor($secondi/3600));
$secondi-=$ore*3600;
$minuti = sprintf("%02d",floor($secondi/60));
$secondi-=$minuti*60;
$secondi = sprintf("%02d",$secondi);
//Rendo leggibile all'utente il tempo
$tempo = number_format($percentualeVisual,2)."%";
$tempo.= "<br>Elaborazione: ".$_SESSION['contatore']."/".$_SESSION['totElementi'];
$tempo.= "<br>Tempo rimanente: $ore ore $minuti minuti $secondi secondi";
$tempo.= "<br>Tempo trascorso: $tempoTrascorso sec.";
if($_SESSION['contatore']<$_SESSION['totElementi']-1)
{
//Aggiorna il mio contenuto della pagina in modo asincrono
$objResponse->assign("barra","style.width",ceil($widthLoadingBar*$percentualeAvanzamento)."px");
$objResponse->assign("barra","style.height","20px");
$objResponse->assign("dati","innerHTML",$tempo);
$objResponse->script("xajax_loading(0)");
}
else
{
//Aggiorna il mio contenuto della pagina in modo asincrono
$objResponse->assign("barra","style.width",$widthLoadingBar."px");
$objResponse->assign("barra","style.backgroundColor","#2CBBEC");
$objResponse->assign("dati","innerHTML","Caricamento completato!");
}
$_SESSION['contatore']++;
//ritorna la risposta in formato XML
return $objResponse;
}
//Intercetta una richiesta verso xajax altrimenti carica normalmente la pagina
$xajax->processRequest();
?>
<html>
<head>
<?php
//output xajax, deve essere chiamato all'interno del tag head
$xajax->printJavascript();
?>
</head>
<body>
<div id='content'>
<div id="barra"></div>
</div>
<div id="dati"></div>
<br>
<button onclick='xajax_loading(1);' >Click Me!!</button>
</body>
</html>
- Innanzitutto viene richiamata la libreria core per utilizzare tutti i metodi che xajax ci mette a disposizione.
- Viene istanziato l'oggetto xajax:
$xajax = new xajax(); - Tramite il metodo
configuredell'oggetto xajax si impostano i riferimenti alle librerie Javascript con$xajax->configure('javascript URI', 'percorso librerie'); - Registro il nome della funzione PHP che voglio utilizzare tramite xajax con
$xajax->registerFunction("loading"); - Scrivo la funzione PHP che ho appena registrato: questa funzione, banalmente, si occupa di processare un numero stabilito di richieste (in questo caso 50 in modo ricorsivo) fino a quando tutte le richieste sono terminate.
Per ogni richiesta, viene registrato il tempo di esecuzione in una variabile di sessione, così da permettere un calcolo del tempo rimanente trascorso per il completamento di tutte le operazioni.
Sempre all'interno della funzione PHP, per ogni operazione eseguita viene associata una modifica allo stile della pagina, creando così un effetto grafico che può farci comprendere meglio il susseguirsi degli eventi. Ad esempio, per modificare la barra di avanzamento si utilizzerà la seguente funzione:
$objResponse->assign("barra","style.width",ceil($widthLoadingBar*$percentualeAvanzamento)."px");
che modificherà la larghezza secondo i calcoli presenti nel terzo parametro per il div avente per id 'barra'.
La funzione, ad ogni esecuzione, ritornerà una risposta in formato XML del tipo $objResponse = new xajaxResponse(); che verrà processata dal metodo $xajax->processRequest();
All'interno dei tag <head> della pagina HTML bisognerà richiamare il metodo $xajax->printJavascript() che avrà il compito di generare il codice Javascript necessario alla corretta esecuzione dello script.
Infine, tramite un evento, come può essere la pressione di un pulsante, si associa le funzione PHP registrata tramite xajax.
Anche se questo script non fa nulla di trascendentale, potrebbe essere un aiuto in più per chi afrronta per la prima volta l'utilizzo di questo framework, che si è rivelato molto versatile ed utile lavorandpo a stretto contatto con PHP.
