• Programmazione » Programmazione » Ajax - Tutorial, articoli e suggerimenti

Impariamo con facilità ad usare prototype: prima parte

Questa è la prima parte di un breve tutorial che intende esplorare le funzionalità di base del framework Prototype.

Prototype è un framework javascript che permette di usare la tecnologia Ajax senza addentrarsi troppo nei meccanismi implementativi. Nell'esempio seguente vi verrà mostrato quanto sia semplice usare questa libreria. Come prerequisito è necessario che scarichiate l'ultima versione della libreria e che il vostro browser abbia abilitato javascript ovviamente.

Uno sguardo al codice

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

Per prima cosa includiamo la libreria Prototype nell'header della pagina:

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

Poi andiamo a creare due funzioni: la prima è lo script principale che passa il testo allo script PHP, mentre la seconda gestisce la risposta dello script PHP e stampa il risultato 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, potete chiamare la chiamata di funzione $('result'): questa è una particolarità di Prototype che rimpiazza efficacemente document.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 ricorso all'evento onClick del bottone. Come si può vedere vengono passati due valori:

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

Dobbiamo passare nel parametro nome e valore (per esempio: ‘val=myvalue’). Facciamo riferimento a questa procedura attraverso la funzione $F() che rappresenta una scorciatoia per document.getElementById(’myval’).value.
Lato server, il nostro script PHP prende il valore che passiamo via javascript tramite la variabile $_GET[’val’] e ci ritorna il testo 'You entered: yourvalue' (dove ‘yourvalue’ è quello che avete 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 una soltanto delle varie potenzialità di Prototype. Vi ricordo che è possibile usare congiuntamente a Prototype la libreria Scriptaculous per ottenere effetti grafici sorprendenti.