LinkBack URL
About LinkBacks
indice degli argomenti
Introduzione
L'articolo che segue vuole essere un buon punto di riferimento riguardante un nuovo approccio per lo sviluppo di applicazioni web, che si sta affermando in questi ultimi tempi. Stiamo parlando di AJAX, acronimo di Asynchronous Javascript and XML, tecnica che introduce l'utilizzo di diverse tecnologie per garantire una migliore interattivita' tra il client ed il server ed inoltre, come vedremo piu' avanti, contribuira' molto ad allegerire il carico di lavoro sul Server, dovuto alle continue generazioni di pagine in base a determinate richieste pervenute dai Clients, consentendoci una migliore gestione dello scambio dei dati tra Client e Server. Come risultato, potremo gestire i risultati e visualizzarli in determinati punti, nelle nostre pagine web senza dover ricaricare continuamente la stessa pagina, ad ogni richiesta. AJAX, dunque, rappresenta un insieme di tecnologie web, ma quali ? Analizziamo in questo primo paragrafo le componenti di questa nuova tecnica di programmazione, ricordiamoci comunque che AJAX non e' un framework o qualcos'altro del genere, di conseguenza non esiste nulla scaricare:
- HTML
L'HTML ci permette di creare tutti gli elementi necessari all'interno delle nostre pagine web, come ad esempio, le Web Forms ed i campi che verranno utilizzati durante l'utilizzo dell'applicazione stessa, per la raccolta dei dati necessari al corretto funzionamento.
- Javascript
Tutto il codice Javascript che andremo ad utilizzare rappresentera' la parte principale sulla quale si basera' questa nuova tecnica AJAX. Tramite Javascript gestiremo le varie comunicazioni tra il Client ed il Server, grazie all'oggetto XMLHttpRequest.
- DOM
Il Document Object Model in se, e' una API ( Application Programming Interface ) utilizzata per la rappresentazione e la manipolazione di documenti, nel nostro caso, documenti Web. Nell' esempio proposto in questo articolo si discutera' sul DOM standard definito dal W3C. Grazie alle funzionalita' offerte dal DOM saremo in grado di gestire i vari elementi che compongono il nostro documento web.
Introdotte le componenti che costituiscono AJAX e' arrivato il momento di fornire una migliore definizione per questa tecnica:
"AJAX rappresenta una tecnica che consente l'elaborazione di singole o piu' parti e/o elementi delle nostre pagine web, in base a determinate richieste pervenute al server, evitando la rielaborazione dell'intero documento. Ottenendo come vantaggio una notevole diminuzione del carico di lavoro sul server."
La figura mostra in modo molto semplificato il funzionamento di questa tecnica.
Cosa andremo a leggere in questo articolo
Nell' articolo introduttivo che segue, riguardante questo nuovo concetto "AJAX", scopriremo come sfruttare questa tecnica mediante esempi concreti in cui ajax si dimostrera' molto utile. Cercando di illustrare i concetti fondamentali per poter sviluppare al meglio un'applicazione web PHP basata non interamente su Ajax e come gestire le interazioni tra client e server. Come semplice esempio osserveremo come sia possibile popolare un elemento HTML SELECT in base a determinate scelte effettuate su di un primo elemento HTML SELECT. Per quanto questo esempio possa sembrare banale, cercheremo di proporre una soluzione client Javascript, piu' generica possibile, che sia in grado di adattarsi a molte altre esigenze, molto piu' complesse. E' naturale aggiungere che la tecnica in questione non necessita' affatto dell'ausilio del PHP, ma e' utilizzabile anche con altri linguaggi di programmazione web, come ASP, ASP.Net, CGI, JSP ed altri ancora. Tutto cio', poiche' non si ha interazione con il linguaggio di programmazione in particolare, bensi' con le risposte XML generate da un SERVER. In teoria sara' possibile sviluppare applicazioni client, esclusivamente con delle buone nozioni su XHTML e Javascript ed ovviamente, essere a conoscenza delle richieste da inviare al server per la ricezione di dati specifici. Cio', potrebbe rappresentare un'altra ottima alternativa alla separazione tra codice HTML e codice PHP (o altro che sia), in questo modo i web designer potranno gestire tutti gli effetti dinamici delle applicazioni senza essere a conoscenza del codice sorgente dell'applicazione server.
L'oggetto XMLHttpRequest
Come accennato in precedenza, l'oggetto XMLHttpRequest e' necessario per la gestione dello scambio di informazioni tra il Client ed il Server, e sara' utilizzato mediante codice Javascript. Suggerito dal nome stesso, la funzione principale di questo oggetto consiste nell'eseguire richieste HTTP verso il server e, a richiesta conclusa, fornire come risultato dell'operazione, un documento XML contenente le informazioni desiderate. Quindi, ogni qualvolta vorremmo utilizzare AJAX nelle nostre applicazioni, sara' necessario istanziare un nuovo oggetto XMLHttpRequest, successivamente specificare che tipo di richiesta effettuare (GET o POST), suggerire l'URL di destinazione ed infine, se gestire lo scambio di informazioni in modo Sincrono a Asincrono. Ovviamente, specificheremo sempre, la modalita' Asincrona, altrimenti AJAX non avrebbe senso. Cosa vuol dire Asincrono ? Impostando la modalita' asincrona potremo continuare a navigare sulla stessa pagina, o avviare altre funzioni AJAX, senza mai perdere la visualizzazione dei contenuti, in parole povere, la visualizzazione della pagina non dipendera' piu' dall'attesa che il server impieghera' per generare i risultati, poiche' tutti i processi vengono eseguiti in *background*, l'utente che utilizzera' l'applicazione non sara' a conoscenza di cio' che avviene sul server. L' invio dei dati di tipo POST, implica il settaggio di diversi altri parametri, come l'HEADER della richiesta, nel nostro esempio, utilizzeremo un'header del tipo: Content-type=application/x-www-form-urlencoded, ed infine, ci preoccuperemo di inviare i singoli valori della form. Mentre, con una richiesta di tipo GET, ci saremmo limitati a specificare semplicemente l'URL di destinazione.
Messaggi restituiti dal server
Trattandosi di richieste HTTP, e' utile soffermarci sui possibili messaggi che il server restituira' ad ogni richiesta completata:
Un esempio concretocodice:1xx: Information Message: Description: 100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request 101 Switching Protocols The server switches protocol 2xx: Successful Message: Description: 200 OK The request is OK 201 Created The request is complete, and a new resource is created 202 Accepted The request is accepted for processing, but the processing is not complete 203 Non-authoritative Information 204 No Content 205 Reset Content 206 Partial Content 3xx: Redirection Message: Description: 300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five addresses 301 Moved Permanently The requested page has moved to a new url 302 Found The requested page has moved temporarily to a new url 303 See Other The requested page can be found under a different url 304 Not Modified 305 Use Proxy 306 Unused This code was used in a previous version. It is no longer used, but the code is reserved 307 Temporary Redirect The requested page has moved temporarily to a new url 4xx: Client Error Message: Description: 400 Bad Request The server did not understand the request 401 Unauthorized The requested page needs a username and a password 402 Payment Required You can not use this code yet 403 Forbidden Access is forbidden to the requested page 404 Not Found The server can not find the requested page 405 Method Not Allowed The method specified in the request is not allowed 406 Not Acceptable The server can only generate a response that is not accepted by the client 407 Proxy Authentication Required You must authenticate with a proxy server before this request can be served 408 Request Timeout The request took longer than the server was prepared to wait 409 Conflict The request could not be completed because of a conflict 410 Gone The requested page is no longer available 411 Length Required The "Content-Length" is not defined. The server will not accept the request without it 412 Precondition Failed The precondition given in the request evaluated to false by the server 413 Request Entity Too Large The server will not accept the request, because the request entity is too large 414 Request-url Too Long The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information 415 Unsupported Media Type The server will not accept the request, because the media type is not supported 416 417 Expectation Failed 5xx: Server Error Message: Description: 500 Internal Server Error The request was not completed. The server met an unexpected condition 501 Not Implemented The request was not completed. The server did not support the functionality required 502 Bad Gateway The request was not completed. The server received an invalid response from the upstream server 503 Service Unavailable The request was not completed. The server is temporarily overloading or down 504 Gateway Timeout The gateway has timed out 505 HTTP Version Not Supported The server does not support the "http protocol" version
Una volta introdotto il funzionamento di AJAX ed inoltre, la tavola completa dei messaggi HTTP, e' arrivato il momento di discutere l'utilizzo di AJAX in un caso reale. Ovvero, integrare questa tecnica in uno script Javascript che consenta di popolare una SELECT in base alla selezione eseguita su una prima SELECT. Ad esempio, se dovessimo popolare una seconda SELECT, supponendo di avere 500 opzioni per ciascuna opzione della prima select, pensiamo almeno a 3 opzioni, uhm... 3 * 500 = 1500. Tradurre il tutto in Javascript equivale a creare tre array con 500 elementi, ciascuno. E se pensassimo di leggere le informazioni in modo del tutto dinamico, interrogando un Database, cio' sarebbe impossibile. In queste circostanze, l'utilizzo di AJAX e' di fondamentale importanza.
Per prima cosa, preoccupiamoci di scrivere il codice HTML per la creazione della webform contenente le due SELECT:
File: sample.php (1° Parte - WebForm)
Come potete notare mi sono preoccupato di lasciare degli spazi tra i tag <script> ... </script>, poiche' analizzeremo successivamente come scrivere il codice Javascript da inserire nel nostro script. Tutto il codice che verra' visualizzato nei paragrafi che seguono e' da considerarsi tra i tag <script> </script>.codice HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test AJAX</title> <script language="javascript" type="text/javascript"> ... ... </script> </head> <body> Seleziona la Categoria: <select id="mainSelection" onchange="populateSubSelection()"> <option value="">---</option> <option value="A">Menu' A</option> <option value="B">Menu' B</option> <option value="C">Menu' C</option> </select> Seconda SELECT: <select id="subSelection"> <option value="">---</option> </select> </body> </html>
Creare l'oggetto XMLHttpRequest
La creazione dell'oggetto XMLHttpRequest e' la parte piu' importante dell'applicazione client, poiche' senza di esso non saremmo in grado di scambiare informazioni con il server. Le difficolta' principali che si affrontano durante la creazione di questo oggetto, dipendono da fatto che alcuni browser sfruttano versioni proprietarie dell'oggetto, come Microsoft IE, di conseguenza si cerchera' di scrivere una funzione JS in grado di generare un oggetto XMLHttpRequest specifico per il tipo di browser utilizzato:
File: sample.php (2° Parte - l'oggetto XMLHttpRequest)
Intercettare l'evento onchange() di Javascriptcodice HTML:... function newXMLHttpRequest(){ var xmlreq = false; //Controllo il tipo di oggetto XMLHttpRequest da utilizzare if(window.XMLHttpRequest){ //Per browser non Microsoft xmlreq = new XMLHttpRequest(); }else if(window.ActiveXObject){ //Cerco di creare l'oggetto via MS ActiveX try{ //Nuove versioni per browser IE xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e1){ //Errore riscontrato durante la creazione dell'oggetto try{ //Precedenti versioni per browser IE xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2){ //Nuovo errore durante la creazione dell'oggetto xmlreq = false; } } } //Restituisco l'eventuale oggetto XMLHttpRequest return xmlreq; } ... ... ...
Scritta la funzione per la creazione dell'oggetto XMLHttpRequest, vediamo come intercettare la selezione dell'opzione della prima SELECT mediante l'evento Javascript onchange(), che si puo' facilmente notare nel primo listato che mostra il codice necessario per la creazione della WebForm. Intercettato l'evento ci preoccuperemo di chiamare una funzione specifica ("populateSubSelection()") che recuperera' il valore selezionato della SELECT ed avviera' un'interazione Ajax:
File: sample.php (3° Parte - la funzione "populateSubSelection()")
Come si nota, abbiamo utilizzato un metodo di invio POST, rispettando i passaggi necessari per effettuare un invio corretto della richiesta. Creato l'oggetto "req" ed inviata la richiesta, dovremo soffermarci su questa riga ed esaminare i cinque diversi stati della elaborazione della richiesta:codice HTML:... ... /* * Funzione per la popolazione della Seconda SELECT */ function populateSubSelection(){ //Recupero i dati da inviare var mainSelection = document.getElementById("mainSelection"); //Creo un nuovo oggetto XMLHTTPRequest var req = newXMLHttpRequest(); //Invio la richiesta req.open("POST", "data.php", true); req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Invio i dati POST req.send("choice=" + mainSelection.options[mainSelection.selectedIndex].value); //Gestore dell'evoluzione dello stato dell'oggetto req req.onreadystatechange = handleResponse(req, updateSubSelection); } ... ... ...
L'oggetto req assumera' 5 diversi stati durante l'elaborazione della richiesta. Ogni qualvolta lo stato cambiera', chiameremo la funzione handleResponse() che, a stato finale raggiunto chiamera' a sua volta una nuova funzione che gestira' il risultato XML, nel nostro caso, popolera' la seconda SELECT: updateSubSelection(). Prima di andare oltre, e studiare la funzione handleResponse mi sembra corretto visualizzare la tabella riepilogativa dei 5 stati:codice://Gestore dell'evoluzione dello stato dell'oggetto req req.onreadystatechange = handleResponse(req, updateSubSelection);
Gestire la richiesta AJAX - la funzione: handleResponse()codice:0. Uninitialized 1. Loading 2. Loaded 3. Interactive 4. Finished
Se l'oggetto req rappresenta la parte piu' importante della nostra applicazione client, non sara' certo di meno quest'altra funzione handleResponse() che si preoccupera' di gestire l'evoluzione dell'oggetto req, nel tempo, e non appena si raggiungera' lo stato finale, richiamera' automaticamente la funzione passata come secondo parametro per gestire il risultato XML prodotto, in caso contrario restituira' un messaggio di errore. Ecco perche', nell'introduzione accennavo allo sviluppo di codice generico che potra' essere utilizzato in piu' occasioni. Di seguito viene visualizzato il listato della funzioni handleResponse() con i dovuti commenti:
File: sample.php (4° Parte - la funzione "handleResponse()")
Lo script PHP residente su Servercodice HTML:... ... /* * Ritorna una funzione per la gestione dello stato dell'oggetto req. * Ed infine a stato finale raggiunto, invia la risposta XML alla funzione che dovra' gestire il tutto. * reg = Istanza XMLHTTPRequest * XMLHandler = nome della funzione a cui passare il risultato XML da gestire */ function handleResponse(req, XMLHandler){ return function(){ //Controllo se l'oggetto req ha raggiunto lo stato finale if(req.readyState == 4){ //Inoltre accertiamoci di aver ottenuto il messaggio 200 dal server, if (req.status == 200){ //A questo punto richiamo la funzione che gestira' il risultato XML XMLHandler(req.responseXML); }else{ alert("Errore HTTP: " + req.status); } } } } ... ... ...
Prima di dare uno sguardo verso l'ultima porzione di codice del file sample.php, e' necessario visionare il codice PHP che risidera' sul nostro server. Come ricorderemo, abbiamo studiato che esistono due modalita' di invio per le richieste, ovvero: GET o POST. Nel nostro esempio, come viene riportato nella 3° parte di codice sorgente del file sample.php, abbiamo utilizzato il metodo POST, quindi, ci siamo preoccupati di impostare un header per l'invio di dati provenienti da una webform ed inoltre, abbiamo specificato di inviare un determinato campo choice, che conterra' il valore della option della prima select, selezionato.
Lo script PHP che risiedera' sui nostri server, non fara' altro che confrontare il valore della variabile choice, recuperata giustamente come $_POST['choice'] e successivamente generara' un documento XML differente in base al valore ottenuto, si segua comunque il codice sorgente completo provvisto di commenti:
File: data.php (Codice sorgente completo)
Gestire le risposte con tramite l'oggetto DOM di JavascriptCodice PHP:<?php
//Imposto un header XML
header("Content-type: application/xml");
header("Cache-control: no-cache, must-revalidate");
echo "<?xml version=\"1.0\"?>\n";
echo "<categorie>\n";
//Recupero la variabile sulla quale effettuare i vari controlli
$myChoice = @$_POST['choice'];
//Eseguo il controllo
switch($myChoice){
case 'A':
echo "\t<categoria value=\"1\">A. Prima Voce</categoria>\n";
echo "\t<categoria value=\"2\">A. Seconda Voce</categoria>\n";
echo "\t<categoria value=\"3\">A. Terza Voce</categoria>\n";
break;
case 'B':
echo "\t<categoria value=\"4\">B. Quarta Voce</categoria>\n";
echo "\t<categoria value=\"5\">B. Quinta Voce</categoria>\n";
echo "\t<categoria value=\"6\">B. Sesta Voce</categoria>\n";
break;
case 'C':
echo "\t<categoria value=\"7\">C. Settima Voce</categoria>\n";
echo "\t<categoria value=\"8\">C. Ottava Voce</categoria>\n";
echo "\t<categoria value=\"9\">C. Nona Voce</categoria>\n";
echo "\t<categoria value=\"10\">C. Decima Voce</categoria>\n";
break;
default:
echo "\t<categoria value=\"\">---</categoria>\n";
break;
}
echo "</categorie>\n";
?>
Generato il documento XML attraverso lo script PHP residente sul Server, ed inviato come risultato alla funzione passata come secondo parametro ad handleResponse(reg, XMLHandler), ovvero, updateSubSelection() siamo oramai giunti alla fase conclusiva dello script, la popolazione della seconda Select. Il compito sara' affidato alle varie funzioni Javascript per la manipolazione del DOM (Document Object Model):
File: sample.php (5° ed ultima Parte - la funzione "updateSubSelection()")
Conclusionicodice HTML:... ... /* * Popolo la seconda SELECT * XMLResult = Il risultato XML prodotto da handleResponse */ function updateSubSelection(XMLResult){ //Gestisco il documento XML ricevuto e popolo la seconda SELECT var categoria = XMLResult.getElementsByTagName('categoria'); //Recupero la seconda SELECT var subSelection = document.getElementById("subSelection"); //Svuoto la secondo SELECT for (var i = subSelection.length - 1; i >= 0; i--) subSelection.remove(i); //Scorro gli elementi for (var i = 0; i < categoria.length; i++){ //Recupero i vari elementi singoli var item = categoria[i]; //Creo il nuovo elemento OPTION da aggiungere nella seconda SELECT var NewOpt = document.createElement('option'); NewOpt.value = item.getAttribute("value"); NewOpt.text = item.firstChild.nodeValue; //Popolo la seconda SELECT try{ subSelection.add(NewOpt, null); //Metodo Standard, non funziona con IE }catch(e){ subSelection.add(NewOpt); // Funziona solo con IE } } } ...
Per quanto il codice riportato in questo articolo tecnico possa sembrare complicato da comprendere, sara' sufficiente leggere attentamente i commenti nelle varie porzioni di codice per capirne bene il funzionamento di AJAX. Ovviamente in rete si possono trovare anche altri metodi, a prima vista molto piu' semplici di questo, ma non presentano certamente la stessa affidabilita' ed inoltre la stessa generalizzazione del problema. E' ovvio ricordare, che il codice presente in questo articolo e' da intendersi come introduzione all'argomento, sarete voi a migliorarlo nell varie sezioni, aggiungendo nuove funzioni e caratteristiche aggiuntive, proponendo nuove idee. Inoltre, concludo col ricordare alcuni aspetti fondamentali riguardo l'utilizzo della tecnica AJAX nelle applicazioni web, o meglio dire, il ruolo che questa tecnica deve avere. Solitamente AJAX "dovrebbe" essere utilizzato per migliorare l'interazione tra Client e Server, permettendoci di sviluppare User Interfaces piu' amichevoli e funzionali e non, applicazioni web complete. Sarebbe impossibile sviluppare un'intera applicazioni in una solo documento. In allegato e' presente il codice completo dell'esempio proposto in questo articolo. Potrete "divertirvi", smanettandoci sopra. Per chi invece, vuole approfondire l'argomento segnalo di seguito alcuni utili riferimenti, da me utilizzati per la stesura di questo articolo.
Riferimenti:
- Ajax for Java developers: Build dynamic Java applications
- Mastering Ajax, Part 1: Introduction to Ajax
- XMLHttpRequest and AJAX for PHP programmers
- SAJAX: Simple AJAX Toolkit
Allegato:
- AJAX, Dimensione: 2,24 Kb
Rispondi quotando
