Ajax Primi Passi Per Iniziare

primi passi per iniziare Quante volte in questi ultimi mesi abbiamo sentito parlare di AJAX? Ho deciso di scrivere quest'articolo con l'intento di aiutare a sviluppare le prime applicazioni AJAX a coloro che si vogliono avvicinare a questo "nuovo mondo" ritenuto spesso essere una cosa per soli esperti. Come premesso partiamo da zero cominciando col dire che AJAX è un acronimo e sta per Asynchronous Javascript and XML. AJAX non è un linguaggio di programmazione ma piuttosto la combinazione di più tecnologie (HTML , XML, Javascript, CSS) per la realizzazione di applicazioni web più veloci. Il tradizionale modello web si basa sul paradigma request/response sincrono cioè il browser fa una richiesta al web server e rimane in attesa della risposta fino alla risposta da parte del web server che a seconda dei casi può impiegare più o meno tempo. Mentre, come il nome stesso suggerisce, AJAX si basa su comunicazione asincrona cioè il browser fatta la richiesta non si blocca aspettando la risposta ma permette all'utente di continuare la navigazione aggiornando solo in seguito la pagina html con i dati restituiti dal server. Figura. 1 Per comunicare con il server AJAX usa Javascript ed in particolare l'oggetto XMLHttpRequest (XHR) ciò comporta che a differenza di una comunicazione web classica ora abbiamo un livello in più lato client che viene chiamato motore AJAX (AJAX engine) ed è proprio questo livello che permette di non dover ricaricare sempre la pagina ad ogni richiesta ma soltanto quella parte che ci interessa. Il server può rispondere inviando i dati in formato XML che vengono quindi processati utilizzando Javascript ma questo non è strettamente necessario.

Figura. 2 Questo è ciò che avviene in sintesi ora vediamo un semplice esempio di utilizzo puramente didattico di come le cose funzionino in pratica. Come ultima cosa ricordo che AJAX lavora lato client e che quindi possiamo lavorare lato server con il linguaggio che più ci aggrada (Java, PHP, .Net, etc). Io utilizzerò in seguito PHP. Let's go. Immaginiamo di avere un form con due campi testo. Vogliamo che il secondo campo, dopo ogni carattere digitato nella prima casella di testo, si valorizzi con il testo reso maiuscolo del primo. Perciò cominciamo con lo scrivere il form con i due campi testo. <form> Input text: <input type="text" name="inputText" onkeyup="startRequest()"> <br> Output text: <input type="text" name="outputText" readonly> </form>

Ogni volta che digitiamo un carattere nel campo inputText viene richiamata la funzione startRequest e da qui cominciamo a parlare di AJAX. Per prima cosa si dichiara una variabile globale (objXmlHttpReq) per contenere il riferimento all'oggetto XMLHttpRequest (responsabile della comunicazione AJAX con il server). Cominciamo col dire che qui in passato si creavano i primi problemi in quanto IE non implementava l'oggetto XMLHttpRequest standard ma ne utilizzava uno suo e quindi dovevamo verificare quale browser stavamo utilizzando per creare l'oggetto giusto. Tuttavia con IE7 Microsoft ha deciso di implementare anche lei l'oggetto XMLHttpRequest superando quindi il problema che però rimane per le versioni precedenti. Dopo aver dichiarato la variabile objXmlHttpReq scriviamo la funzione (createXmlHttpRequest) che ci servirà per creare l'istanza dell'oggetto XMLHttpRequest. Questa funzione molto semplice testa se il browser che utilizziamo supporta l'oggetto XMLHttpRequest ed in tal caso ne istanziamo uno altrimenti verifica se il browser supporta i controlli ActiveX (ciò significa che stiamo utilizzando IE5 o IE6) e se il controllo ritorna true verrà creata un'istanza tramite la chiamata all'oggetto equivalente implementato da Microsoft. Qualora anche questo non fosse il caso mostriamo un messaggio di errore e settiamo a null la variabile objXmlHttpReq. Listato 1 var objXmlHttpReq; function createXMLHttpRequest() { if (window.XMLHttpRequest){ // codice per IE7+, Firefox, Chrome, Opera, Safari objXmlHttpReq=new XMLHttpRequest(); } else if (window.ActiveXObject){ // codice per IE6, IE5 objXmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); } else { objXmlHttpReq=null; alert("Il tuo browser non supporta XMLHTTP. Scaricati una versione più aggiornata!"); } } La seconda funzione startRequest per prima cosa crea l'istanza dell'oggetto XMLHttpRequest con la chiamata alla funzione sopra descritta. Poi verificato che è stata effettivamente creata l'istanza dell'oggetto invia la richiesta al server passandogli il valore del campo inputText ed infine imposta il gestore di eventi con il nome della funzione da richiamare al verificarsi di un evento.

Listato 2 function startRequest() { createXMLHttpRequest(); if (objXmlHttpReq!=null){ objXmlHttpReq.open("GET", "upperCase.php?inputText="+document.getElementById('inputText').value", true); objXmlHttpReq.send(null); objXmlHttpReq.onreadystatechange = handleStateChange; } } Quest'ultima funzione ha il compito di aggiornare il campo outputText con il valore di ritorno dal server ma prima verifica che lo stato dell'oggetto XMLHttpRequest sia 4 (che sta per complete). Per completezza gli altri possibili stati sono: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive Listato 3 function handleStateChange() { if (objXmlHttpReq.readystate == 4){ if (objXmlHttpReq.status == 200 ){ document.getElementById('outputText').value = objXmlHttpReq.responseText; } } } Non resta che vedere il codice lato server. Come abbiamo detto vogliamo trasformare in maiuscolo il contenuto del campo inputText che ci viene passato al momento della richiesta del client. Per far ciò è sufficiente recuperare il valore passato e restituirlo convertito in maiuscolo dalla funzione php strtoupper ed il gioco è fatto. Listato 4 (upperCase.php) <?php if(isset($_GET['inputText']){ echo strtoupper($_GET['inputText']); } ?>

Sarà ora sufficiente riassemblare le varie linee di codice sopra descritte per ottenere il codice lato client del nostro esempio: Listato 5 (text_to_upper.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Primo esempio di Ajax - PHP</title> <script language="javascript"> var objXmlHttpReq; function createXMLHttpRequest() { if (window.XMLHttpRequest){ // codice per IE7+, Firefox, Chrome, Opera, Safari objXmlHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject){ // codice per IE6, IE5 objXmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else { objXmlHttpReq = null; alert("Il tuo browser non supporta XMLHTTP. Scaricati una versione più aggiornata!"); } } function startRequest() { createXMLHttpRequest(); if (objXmlHttpReq != null){ objXmlHttpReq.open("GET", "upperCase.php?inputText="+document.getElementById('inputText').value, true); objXmlHttpReq.send(null); objXmlHttpReq.onreadystatechange = handleStateChange; } } function handleStateChange() { if (objXmlHttpReq.readystate == 4){ if (objXmlHttpReq.status == 200 ){ document.getElementById('outputText').value = objXmlHttpReq.responseText; } } } </script> </head>

<body> <form> Input text: <input type="text" id="inputText" onkeyup="startRequest()" /> <br> Output text: <input type="text" id="outputText" readonly /> </form> </body> </html> Spero di essere stato chiaro e di avervi incuriosito abbastanza da farvi utilizzare AJAX nelle vostre prossime applicazioni. Riferimenti • http://www.adaptivepath.com/ideas/essays/archives/000385.php • http://it.wikipedia.org/wiki/AJAX • http://www.w3schools.com/ajax/ajax_intro.asp • http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html

http://segnalazionit.org	18
http://segnalazionit.blogspot.com	13
http://wildfire.gigya.com	1

Ajax Primi Passi Per Iniziare

by astanco on Sep 15, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 32

Statistics

Ajax Primi Passi Per Iniziare — Document Transcript