Ajax per tutti (prima parte)



Questo tutorial si appoggia ad una classe chiamata SACK, il nome della classe significa Simple AJAX Code Kit ed è stata realizzata da Gregory Wild-Smith ed è distribuita con una versione modificata della licenza X11.

Volutamente non affronteremo le problematiche di javacript ma affronteremo solamente l’integrazione con PHP. Sono comunque necessarie delle conoscenze di base PHP e minime di Javascript.

Per iniziare scaricate la classe full package, create una cartella “sack” in cui decomprimete il contenuto del pacchetto zippato. Il file che contiene la classe è tw-sack.js ed è l’unico che per questo tutorial è necessario.

Iniziamo con il classico esempio “Ciao mondo”.

Nella cartella “sack” creiamo un file base.html con questo contenuto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Simple AJAX Code-Kit (SACK) Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Gianluca"/>
<script type="text/javascript" src="tw-sack.js"></script>
<script type="text/javascript">
function avvia_ajax(testo){
var ajax = new sack();
ajax.setVar("area_testo", testo);
ajax.requestFile = "risposta.php";
ajax.method = "POST";
ajax.element = "nuovo_testo";
ajax.runAJAX();
}
</script>
</head>
<body>
<h1>SACK Tutorial parte 1</h1>
<p>Potete testare la classe inserendo un testo nella textarea sottostante.</p>
<h2>Textarea</h2>
<form name="dati_form" method="post" action="javascript:void(0);">
<fieldset><legend>Modifica il testo e guarda cosa accade ...</legend>

<label for="mio_testo">Testo editabile</label><textarea id="mio_testo">Ciao mondo</textarea>
</fieldset>
<input type="submit" onClick="avvia_ajax(document.dati_form.mio_testo.value);"/>
</form>
<br>
<fieldset><legend>Risultato AJAX</legend>
<div id="nuovo_testo"></div>
</fieldset>
</body>
</html>

Perchè lo script funzioni dobbiamo creare il file risposta.php con il seguente contenuto:

<?php
echo $_POST['area_testo'];
?>

Provate ad aprire con il vostro browser il file base.html e cliccare il pulsante invia richiesta. Se tutto funziona correttamnete nell’area risultato AJAX dovreste vedere comparire il contenuto della textarea. Complimenti avete integrato il vostro primo script ajax!

Commentiamo il codice.

La parte più complessa è sicuramente la funzione javascript, vediamo nel dettaglio cosa accade.

function avvia_ajax(testo){
var ajax = new sack();
// viene avviata la classe creando l’oggetto ajax

ajax.setVar("area_testo", testo); // settiamo una variabile che verrà passata al file php ( potete settarne quante volete )

ajax.requestFile = "risposta.php"; // file php che viene chiamato

ajax.method = "POST"; // metodo con cui vogliamo passare i dati ‘POST’ oppure ‘GET’

ajax.element = "nuovo_testo"; // elemento nella pagina di partenza in cui vogliamo venga scritto il risultato

ajax.runAJAX(); //esecuzione di AJAX
}

Un’altra osservazione da fare è che bisogna porre particolare attenzione ai name ed id dei vari elementi “form e textarea” nel nostro caso, inoltre bisogna porre attenzione a come si passano i dati all’interno della funzione javascript attivata con l’evento onclick.

Nella seconda parte vedremo come creare delle liste ( <select> ) dinamiche.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest