Ajax - Non solo un detersivo

Pagine WEB Statiche

All'inizio le pagine web erano statiche
Vale a dire, erano dei file contenenti testo codificato in html che venivano inviati come erano al browser
Un designer web scriveva il testo e lo scaricava con qualche strumento (connessione FTP, condivisione del disco, floppy, penna USB) nell'opportuna directroy del server.
Ogni volta che la pagina andava aggiornata occorreva modificare il file e reinserirlo sul server
Era molto difficile gestire i link tra le pagine se questi diventavano troppo complessi

Pagine WEB Statiche

Le pagine non potevano cambiare in base alle richieste dell'utente

Pagine con Javascript

Se invece volessimo modificare la pagina corrente, senza caricarne una nuova potremmo utilizzare il javascript
Javascript è un linguaggio di scripting interpretato client side ad oggetti la cui sintassi richiama vagamente quella del linguaggio java
Con questo linguaggio possiamo accedere al DOM (Document Object Model) della pagina e modificarlo.
Un programma (script) javascript può essere associato alle azioni dell'utente e modificare la pagina in funzione di queste

Pagine con Javascript

Spesso viene usato per verificare i dati immessi dall'utente prima di inviarli al server oppure per visualizzare menù.
Javascript, a differenza di PHP non ha accesso ai dati memorizzati sul server.

Pagine WEB Dinamiche

Con l'introduzione delle pagine attive, per esempio scritte in PHP, il contenuto può essere calcolato
Il PHP è un linguaggio di scripting interpretato server side
Per esempio, se ho una serie di pagine nelle quali voglio mettere una gran quantità di riferimenti incrociati, posso farli calcolare al programma in PHP e quindi non saranno mai sbagliati.
Oppure posso produrre una pagina con informazioni richieste dall'utente tramite un form html

Pagine WEB Dinamiche

Tutte le volte che l'utente preme un link o un bottone della pagina, viene richiamato un programma PHP per produrre una pagina nuova
La nuova pagina prodotta viene caricata dal browser e sostituisce la precedente.

Framework AJAX

Ajax prevede che nella pagina HTML ci sia un javascript che, tramite l'oggetto XMLHttpRequest richiami una particolare funzione di una particolare pagina PHP nel server
Quindi occorre costruire attorno all'oggetto XMLHttpRequest una serie di "utility" per indicare in modo semplice la fuinzione PHP da richiamare nel server e per passare in maniera semplice i parametri a questa funzione
Occorre poi costruire qualcosa nella pagina PHP che mi consenta di chiamare una funzione a piacere tramite l'oggetto XMLHttpRequest nel browser e di passarle i parametri

Framework AJAX

Esistono delle soluzioni già scritte che risolvono questo problema. Queste soluzioni vengono chiamati framework
Alcuni di questi toolkit sono xajax (http://www.xajaxproject.org/), Jamp (http://jamp.alyx.it/), Sajax (http://www.modernmethod.com/sajax/) o AjaxAgent (http://sourceforge.net/projects/ajaxagent/)

Pagine con AJAX

Per poter lavorare su di una pagina senza ricaricarla ed utilizzando dati del server si deve usare la tecnologia AJAX
L'acronimo AJAX indica Asynchronous Javascript And Xml
Una delle prime applicazioni WEB ad utilizzare questa tecnologie è stata GMail, mentre una delle più diffuse oggi è GoogleMaps
Questa tecnologia consente ad uno script ECMAScript o Javascritp di poter interrogare il server per ottenere dei dati

Pagine con AJAX

Questa interazione avviene tramite l'oggetto XMLHttpRequest che esegue la chiamata fisica al server, implementato in tutti gli interpreti ECMAScript dei browser recenti

AjaxAgent (AA)

Ajax Agent (AA) è un semplice framewark AJAX con backend in PHP
L'uso di AjaxAgent è molto semplice ed intuitivo.
Per prima cosa dovremo inserire all'inizio della nostra pagina PHP, prima che venga stampato qualunque cosa, le seguenti due righe:
require("agent.php"); $agent->init();
La prima riga carica il codice di AjaxAgent. La seconda esegue il lavoro vero e proprio di AjaxAgent.

AjaxAgent (AA)

agent.php intercetta le chiamate alle funzioni PHP che il Javascript invia, smistandole alle funzioni nel sorgente PHP, produce il sorgente javascript da includere nella pagina HTML e crea la variabile $agent
$agent->init(); inserisce il codice HTML per caricare la libreria Javascript del toolkit nella pagina; va chiamata nella testata HTML.

Chiamata sincrona o asincrona

Ci sono due modi per chiamare una funzione del server:
- Sincrono
- Asincrono
Se la chiamata è sincrona, vuol dire che il programma non può andare avanti fino a che non arriva la risposta dal server: la pagina Web è bloccata fino all'arrivo della risposta.
La risposta da parte del server verrà immediatamente restituita alla funzione javascript della pagina che ha richiamato la funzione del server.

Chiamata sincrona o asincrona

Se la chiamata invece è asincrona, una volta lanciata la chiamata il programma può procedere. Quando poi arriverà la risposta del server, verrà richiamata una funzione javascript nella pagina per gestirla.
Un esempio di chiamata sincrona è il seguente:
str = agent.call('','hello','');
In questo esempio viene richiamata la funzione PHP function hello() conentua nel sorgente php della pagina corrente (primo parametro ''), non verrà richiamata nessuna funzione javascript alla ricezione dei dati (terzo parametro ''), non passerà nessun parametro alla funzione PHP e metterà ciò che la funione hello restituisce nella variabile str.

Chiamata sincrona o asincrona

Unj esempio di chiamata sincrona è il seguente:
agent.call('demo_external.php','calc','callback',x,y);
In questo caso la funzione function calc($x, $y) verrà richiamata dal file demo_external.php, con i valori di x ed y come parametro, sul server. La funzione ritornerà subito e al ricevimento dei dati verrà richiamata la funzione javascritp callback_hello(str) nella pagina, alla quale verranno passati i dati ricevuti come parametro.

La chiamata da Javascript

Ora il nostro sorgente PHP contiene il codice di AjaxAgent e la nostra pagina prodotta il codice Javascript.
Ora dovremo inserire nella pagina HTML la chiamata che richiami una funzione del server
Naturalmente questa chiamata dovrà essere associata ad un evento, come la pressione di un bottone oppure un timer.
La chiamata della funzione sul server da HTML ha la seguente sintassi PHP:
agent.call(<pagina_PHP>,<funzione_PHP>[,<funzione_di_risposta>][,<eventuali_parametri>...]);

La chiamata da Javascript

In questa chiamata:
- <pagina_PHP> è l'url della pagina che conterrà la funzione di risposta, se è stringa vuota, la funzione di risposta sarà nella nella pagina stessa
- <funzione_PHP> è il nome della funzione PHP da richiamare
- <funzione_di_risposta> è il nome della eventuale funzione di risposta javascript nella pagina HTML che riceverà i dati dal server. Se manca, allora i dati saranno restituiti in modo sincrono dalla agent.call
- <eventuali_parametri> è l'eventuale lista di parametri da passare alla funzione PHP sul server

Le funzioni PHP

In ogni caso si richiamerà una funzione PHP sul server.
Questa funzione potrà essere contenuta nello stesso file PHP che ha prodotto la pagina oppure in un altro sorgente PHP
In ogni caso, il sorgente PHP che contiene la funzione di risposta deve includere il file agent.php tremite l'istruzione require_once "agent.php";
Per quanto riguarda la funzione in se stessa, non dovrà avere particolari requisiti.

Le funzioni PHP

Se nella chiamata da javascript abbiamo previsto dei parametri, i valori di questi parametri verranno inseriti nei corrispondenti parametri della funzione PHP chiamata.
La funzione potrà ritornare un valore di qualunque tipo, anche un array semplice, un array associativo o un oggetto.
Questo valore verrà passato alla funzione javascript chiamante come valore di ritorno di agent.call per una chiamata sincrona

Le funzioni PHP

Nel caso invece di chiamata asincrona, il valore restituito dalla funzione PHP verrà passato come parametro alla funzione di risposta javascript idicata nella agent.call.

La modifica della pagina con javascript

Potremmo ad esempio assegnare un id ad un campo scrivendo il seguente codice html:
<input type="text" name="miocampo" id="mioCampoId" value="default">
In questo caso potremo semplicemente recuperare da javascript il valore del campo e metterlo nella variabile valore con questo codice javascript:
valore = document.getElementById('mioCampoId').value;
Se poi vorremo inserire un valore nel nostro campo basterà scrivere questo codice javascritp:
document.getElementById('mioCampoId').value = 'Nuovo Valore';

La modifica della pagina con javascript

Allo stesso modo potremo sostituire l'immagine visualizzata da un tag img o altri elementi della pagina.
Un ultimo metodo per modificare una pagina è di inserire un tag <div>, sempre con il suo ID. Ad esempio:
<div id="contenuto"</div>
In questo modo potremo inserire dell'HTML a piacere nel div con un codice come il seguente:
document.getElementById('contenuto').innerHTML = '<h2>Nuovo HTML inserito</h1>';

La funzione javascript di risposta

La funzione javascript di risposta, nel caso si utilizzi la modalità asincrona, non ha alcuna particolarità oltre ad avere un unico parametro, tramite li quale le verrà passato il valore di ritorno della funzione PHP.
Nel caso la chiamata sincrona invece il valore verrà restituito direttamente dalla agent.call nella funzione nella quale è stata chimamata.
Normalmente la funzione javascript che riceve i dati dal server (sia la chimanate, se metodo sincrono, sia la funzione di risposta se metodo asincrono) dovrà modificare qualcosa nella pagina utilizzando i dati ottenuti.

La funzione javascript di risposta

Altrettanto, quando chiamaremo la funzione PHP tramite agent.call, probabilmente le passeremo dei parametri utilizzando dati contenuti nella pagina, magari nei campi di un form.
A tal scopo è molto opportuno assegnare un nome agli elementi dei quali vogliamo conoscere il valore oppure modificarne il valore tramite l'attributo id="nome".

[any material that should appear in print but not on the slide]