Adesso che cominciamo ad essere veramente degli espertidella tecnologia Ajax vediamo un esempio veramente concreto. Ossia come si realizza una shoutbox, ossia un luogo dove sia possibile rilasciare dei commenti da parte delle utenze nel vostro sito. Alla fine di questa guida avremmo costruito 5 file che saranno la conclusione del nostro lavoro
Creare una ShoutBox in linguaggio Ajax
- ajax.js: conterrà le funzioni JavaScript;
- index.php: conterrà il form per l’insermento dei posts degli utenti e permettera la loro visualizzazione;
- invia.php: consentirà di popolare la tabella con i dati ricevuti tramite il form;
- mostra.php: file per l’estrazione dei records dalla tabella.
Con qualche giorno di lavoro e un minimo di conoscenza di php da dove vi lasceremo sarà possibile creare una vera e propria chat. Quello che vi occorerrà sarà un database mysql lato server , un server e un po’ di attenzione, se non l’avete lato server createvene uno in qualche hosting gratuito che tanto se ne trovano in giro, oppure scaricatevi EasyPhp e fate diventare il vostro pc un server php con mysql, a voi la scelta. Appena adempiuto a questo passo create quindi le tabelle mysql
A questo punto scriviamo il file di localizzazione in php necessario per connettersi con il database che è
Ovviamente con gli opportuni cambiamenti, ossia con i vostri personali dati di connessione.Andiamo al passo 2.
Questo è il codice della funzione che chiama XMLHTTP; per il controlloo dei dati al Server e la sua eventuale risposta.
:
Come potete vedere questa parte è sempre abbastanza standard , si cambiano dei nomi, ma fondamentalmente il significato è sempre lo stesso, ossia si inizializza una variabile HttpXmlRequest per il passaggio e controllo dei dati con il server e si verifica la compatibilità dei browser che stiamo utilizzando, volendo questo script si potrebbe ricopiare cosi’ com’e’ ogni qual volta che vogliamo fare un’applicazione in cui sia coinvolta la tecnologia Ajax.
Salviamo questo file in un file ajax.js, ossia è volgarmente un javascript, i cui oggetti sono il vero cuore del passaggio dei dati , ossia di Ajax.
Vediamo adesso come costruire la pagina index.php
Passiamo ora al codice della pagina “index.php”, all’interno di essa troveremo innanzitutto l’inclusione del file per la visualizzazione dei records (“mostra.php”) che contiene anche i tags HTML iniziali della pagina; in secondo luogo inseriremo il form per il post dei commenti:
<?php @include 'mostra.php'; ?> <div id="modulo"> </div> <form name="form_invio" method="POST" onsubmit="salva(); return false;"> Nick: <br><input name="nick" type="text"> <br> Sito Web: <br><input name="sito_web" type="text"><br> Commento <br><input name="testo" type="text"><br> <input type="submit" name="submit" value="Invia"><br> </form> </body> </html>
Come potete vedere al momento dell’invio verrà attivata la funzione on submit che si occuperà di passare il comando della funziona al javascprit stesso , ma vediamo adesso come funziona nello specifico questa funzione salva
// funzione per il salvataggio dei dati
function salva()
{ htmlRequest = ajax();
if (htmlRequest==null){
alert ("Il browser non supporta richieste HTTP");
return;
}
// controlliamo i parametri obbligatori
if(document.form_invio.nick.value == "" ||
document.form_invio.nick.value == "NULL"
|| document.form_invio.testo.value == ""
|| document.form_invio.testo.value == "NULL")
{ alert('Inserisci sia il Nick che il testo'); return; }
// inviamo i parametri al file per l'INSERT
htmlRequest.open('POST', 'invia.php');
htmlRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
htmlRequest.send('nick='+document.form_invio.nick.
value+'&testo='+document.form_invio.
testo.value+sito_web='+document.form_invio.sito_web.value);
// svuotiamo il modulo per il messaggio
document.form_invio.testo.value = '';
document.form_invio.testo.focus(); }
in pratica prima si verifica la compatibilità eventuale del browser e dopo
se il campo che gli si è passato non è vuto allora si procede all'invio
stesso dei valori , alla fine si effettuerà lo svuoameno di quei campi che hanno raccolto l’informazione da passare in modo tale da permettere di inserire dell’altra informazione
Come abbiamo visto la funzione salva passa i dati alla funzione invia che è un php cioe’ residente nel server e quindi avremo
questa funzione si occupera’ soltanto di leggere i valori e di inserirli nel database, nel caso abbia realmente ricevuto qualcosa.
Passiamo adesso a descrivere l’ultima funzione che salveremo all’interno del file ajax.js ossia mostra() a cui come dice il nome spetta il compito di visualizzare i file del db; si richiama dunque Xmlhttp segue alert che invierà un messaggio in caso di mancato supporto da parte del browser. Il metodo Open() si occupa di fatto di aprire la richiesta HTTP specificando il metodo da utilizzare (GET oppure il POST) e l’indirizzo del file remoto da richiamare.
// funzione per mostrare i dati
function mostra() {
htmlRequest = ajax();
// controllo nel caso in cui non possa richiamato l'oggetto Xmlhttp
if (htmlRequest==null){
alert ("Il browser non supporta richieste HTTP");
return;
}
htmlRequest.onreadystatechange = function(){
// Restituisce lo stato della richiesta
if(htmlRequest.readyState == 4){
// Restituice il corpo della risposta come stringa
document.getElementById("modulo").innerHTML = htmlRequest.responseText;
} }
// chiamata della pagina PHP che estrae i records
htmlRequest.open("GET", "mostra.php", true);
htmlRequest.send(null); }
// chiamata alla funzione mostra();
// intevallo per l'aggiornamento della pagina
setInterval("mostra()",1000);il setinterval ovviamente sta a indicare un intervallo di tempo dove la funzione aspetta il conteggio fino a mille prima di ripartire.
mentre il codice della pagina mostra molto semplice ve lo lasciamo senza commento ed è:
<?php @header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
@header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
@header("Cache-Control: no-store, no-cache, must-revalidate");
@header("Cache-Control: post-check=0, pre-check=0", false);
@header("Pragma: no-cache");
@include 'config.php'; ?>
<html> <head>
<title>Shoutbox</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"> </script>
</head> <body>
<? $query = "SELECT * FROM shoutbox ORDER BY id DESC"; $result = @mysql_query($query) or die (mysql_error());
if (mysql_num_rows($result) > 0)
{ while($row = mysql_fetch_array($result))
{ $nick = stripslashes($row['nick']);
$testo = stripslashes($row['testo']);
$data = $row['data']; // formattiamo la data in "gg-mm-aaaa"
$data = preg_replace('/^(.{4})-(.{2})-(.{2})$/','$3-$2-$1', $data);
$sito_web = $row['sito_web'];
echo "$nick - $testo - $data <br>\r";
} }
@mysql_close(); ?>da notare come sono definiti gli headers , Questo accorgimento ci permetterà di svuotare la cache del browser ad ogni affiornamento della ShoutBox.
Beh con questo concludiamo la lezione non vi rimane che provare il tutto per vedere se effettivamente funziona, noi in ogni caso per consigli o suggerimenti vostri o nostri vi aspettiamo nel forum. Arriverdi a presto.