Prototype: introduzione (Prima parte)

Impariamo con facilità ad usare prototype: prima parte

Questa è la prima parte di un breve tutorial cheintende esplorare le funzionalità di base delframework Prototype.

Prototype è un framework javascript chepermette di usare la tecnologia Ajax senza addentrarsi tropponei meccanismi implementativi. Nell'esempio seguente viverrà mostrato quanto sia semplice usare questalibreria. Come prerequisito è necessario che scarichiatel'ultima versione della libreria e che il vostrobrowser abbia abilitato javascript ovviamente.

Uno sguardo al codice

Nell'esempio seguente, digiteremo del testo nel campo diun form e quando andremo a cliccare il bottone vedremoapparire il risultato al di sotto senza ricaricare la pagina.Il click del bottone richiamerà una funzionejavascript che passerà il testo inserito ad uno scriptPHP lato server. Lo script PHP richiamerà un'altrafunzione javascript, la quale stamperà il risultatosulla pagina.

Per prima cosa includiamo la libreria Prototypenell'header della pagina:

<script src="dist/prototype.js"type="text/javascript"> </script>

Poi andiamo a creare due funzioni: la prima è loscript principale che passa il testo allo script PHP, mentrela seconda gestisce la risposta dello script PHP e stampa ilrisultato sulla pagina:

<script type="text/javascript">    /* ajax.Request */    function ajaxRequest(url,data) {  var aj = new Ajax.Request(  url, {method:'get',parameters: data,onComplete: getResponse  }    );}/* ajax.Response */function getResponse(oReq) {    $('result').innerHTML = oReq.responseText;}</script>

Nella funzione getResponse qui sopra, potetechiamare la chiamata di funzione$('result'): questa è unaparticolarità di Prototype che rimpiazza efficacementedocument.getElementByID('result').

Infine ecco il form che ci serve per far funzionare il tutto:

<input type="text" id="myval" size="10"><input type="button" value="GO" onClick="ajaxRequest('parse.php', 'val='+$F('myval'))"><div id="result"></div>

Per richiamare le funzioni javascript facciamo ricorsoall'evento onClick del bottone. Come sipuò vedere vengono passati due valori:

il primo è lo script PHP parse.php;
Il secondo è il valore che vogliamo inviare;

Dobbiamo passare nel parametro nome e valore (per esempio:‘val=myvalue’). Facciamo riferimentoa questa procedura attraverso la funzione $F()che rappresenta una scorciatoia perdocument.getElementById(’myval’).value.
Lato server, il nostro script PHP prende il valore chepassiamo via javascript tramite la variabile$_GET[’val’] e ci ritorna il testo'You entered: yourvalue' (dove‘yourvalue’ è quello cheavete immesso nel campo di testo del form).

Ecco lo script parse.php:

if(isset($_GET['val'])) {echo “You entered: “.$_GET['val'];}

Conclusioni

Quanto visto è un semplice esempio che sfrutta unasoltanto delle varie potenzialità di Prototype. Viricordo che è possibile usare congiuntamente aPrototype la libreria Scriptaculous per ottenere effettigrafici sorprendenti.