Il problema fondamentale delle applicazioni in ambito web è quello della compatibilità del codice su diverse architetture e diversi browser che gli utenti della rete usano per navigare. Utilizzare la tecnologia Ajax vuol dire fare un largo uso di Javascript: qui nasce il problema. Questo linguaggio, infatti, non è molto standardizzato. Questo vuol dire che, ad esempio, per ottenere uno stesso risultato su due browser diversi è necessario, a volte, scrivere del codice leggermente diverso, poiché può capitare che un certo oggetto Javascript utilizzato nel codice non venga supportato correttamente da un certo browser, mentre viene supportato ottimamente da altri browser. L’utilizzo di un Framework Javascript ci consente di concentrarci esclusivamente sulla logica della nostra applicazione, non preoccupandoci di gestire la sua compatibilità né di perdere troppo tempo per realizzare un piccolo effetto grafico, ecc.
Il framework che presento ed userò in questo articolo è jQuery, un sistema ottimo, utilizzato anche nelle applicazioni di Google. È gratuito e si può scaricare liberamente dal sito ufficiale. Vediamo ora l’articolo vero e proprio 
Immaginiamo di avere una tabella su un database contenente una serie di dati anagrafici (nome, cognome, indirizzo, telefono…). Vogliamo realizzare una piccola applicazione che visualizzi su una pagina una serie di contatti (solo nome e cognome) e nel momento in cui l’utente fa click su uno di essi, si apre un piccolo pannello contenente gli altri dati (indirizzo, telefono, ecc). Useremo Ajax per dividere in “pagine” i record della tabella e per scaricare i dati anagrafici aggiuntivi (quelli che inseriremo nel pannello) solo quando richiesto. Il sistema è schematizzato in questa immagine:
Il file dati.html, dove visualizzeremo i dati, ha una struttura molto semplice. Ho semplicemente previsto un div dove inseriremo i dati ed un altro div per inserire il link di navigazione tra le pagine dei record. L’impaginazione è lasciata al foglio di stile “style.css“:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery.js" language="javascript" type="text/javascript"></script> <script src="script.js" language="javascript" type="text/javascript"></script> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Visualizzazione Dati con JQuery</title> </head> <body> <h3>Lista Nominativi</h3> <br/> <div id="dati"> </div> <div id="navigation"> </div> </body> </html>
Diamo uno sguardo ora al file getDati.php. Questo è lo script lato server che preleva i dati dal database e li fornisce al file dati.html in formato xml. Lo script offre due servizi: fornire i dati “essenziali”, ovvero nome e cognome, e fornire i dati aggiuntivi di un determinato contatto. Per richiedere la prima funzionalità occorre inviare tramite POST i parametri “start” e “pages” che indicano rispettivamente il record dal quale partire e quanti record prendere a partire da quello iniziale. In questo modo riusciamo ad ottenere la divisione in “pagine” dei record. La seconda funzionalità si richiede inviando tramite POST il parametro “id” che indica l’identificativo del contatto del quale vogliamo i dati aggiuntivi. Vediamo il codice:
<?php header("content-type: text/xml"); header("Last-Modified: ".date("m/j/y h:i")); echo '<?xml version="1.0" encoding="utf-8"?>'; $conn = mysql_connect('localhost', 'root', ''); mysql_select_db('rubrica', $conn); if (isset($_POST['start']) && isset($_POST['pages'])) { //Modalità 1 $start = $_POST['start']; $pages = $_POST['pages']; $first = FALSE; $last = FALSE; $query = "SELECT id, nome, cognome FROM rubrica LIMIT $start, $pages"; $res = mysql_query($query, $conn); $linea = mysql_fetch_array($res, MYSQL_ASSOC); //Controllo se ultima pagina if (mysql_num_rows($res) < $pages) { $last = TRUE; } if (mysql_num_rows($res) == $pages) { $query = "SELECT id, nome, cognome FROM rubrica LIMIT $start, ".($pages+1); $res2 = mysql_query($query, $conn); if (mysql_num_rows($res2) < ($pages + 1)) { $last = TRUE; } } //Controllo se prima pagina if ($start == 0) { $first = TRUE; } $xml = '<lista'; if ($first == TRUE) { $xml .= ' first="1"'; } if ($last == TRUE) { $xml .= ' last="1"'; } $xml .= '>'; echo $xml; while ($linea) { echo "<linea><id>".$linea['id']."</id><nome>".$linea['nome']."</nome><cognome>".$linea['cognome']."</cognome></linea>"; $linea = mysql_fetch_array($res, MYSQL_ASSOC); } echo '</lista>'; } else if (isset($_POST['id'])) { //Modalità 2 $id = $_POST['id']; $query = "SELECT * FROM rubrica WHERE id = $id"; $res = mysql_query($query, $conn); $linea = mysql_fetch_array($res, MYSQL_ASSOC); echo '<dati>'; echo '<indirizzo>'.$linea['indirizzo'].'</indirizzo>'; echo '<citta>'.$linea['citta'].'</citta>'; echo '<telefono>'.$linea['telefono'].'</telefono>'; echo '<email>'.$linea['email'].'</email>'; echo '</dati>'; } ?>
Si notino le chiamate header() per stabilire che il contenuto della risposta è un file xml e per impostare il timestamp dell’ultima modifica a quello dell’istante in cui viene richiamato lo script, eliminando eventuali problemi derivanti dalla cache dei browser.
Il file che permette il funzionamento del sistema è “script.js“, che utilizza jQuery. Vediamo subito il codice, commentato nei vari passi:
$(document).ready(function() { writeContacts(0, 5); }); function writeContacts(sta, pag) { // Elimino il contenuto del div "dati" e del div "navigation" $('#dati').empty(); $('#navigation').empty(); // Richiamo lo script lato server $.post("getDati.php", {start: sta, pages: pag}, function(data) { // Ottengo l'array degli elementi <linea> var a = $(data).children().children(); // Per ogni elemento di a $(a).each(function(i) { // Ottengo gli elementi <id>, <nome> e <cognome> var b = $(a.get(i)).children(); // Li scrivo sulla pagina $('#dati').append('<div class="contatto">'); $('#dati > .contatto:eq('+i+')').append('<div class="id">' + $(b.get(0)).text() + '</div>'); $('#dati > .contatto:eq('+i+')').append('<div class="nome">' + $(b.get(1)).text() + '</div>'); $('#dati > .contatto:eq('+i+')').append('<div class="cognome">' + $(b.get(2)).text() + '</div>'); $('#dati > .contatto:eq('+i+')').append('<div class="more"></div>'); }); //Se non è la prima pagina inserisco il link "Indietro" if ($($($(data).children()).get(0)).attr("first") != "1") { $('#navigation').append('<a href="#" onclick="writeContacts('+(sta-pag)+', '+pag+')">Indietro</a>'); } //Se non è l'ultima pagina inserisco il link "Avanti" if ($($($(data).children()).get(0)).attr("last") != "1") { $('#navigation').append('<a href="#" onclick="writeContacts('+(sta+pag)+', '+pag+')">Avanti</a>'); } // Quando un utente fa click su un contatto $(".contatto").click(function() { var targ = $(this); // Ottengo i div "id", "nome", "cognome" e "more" var q = $(this).children(); // Ricavo l'id del contatto var x = $(q.get(0)).text(); // Richiamo lo script lato server per ottenere i dati aggiuntivi $.post("getDati.php", {id: x}, function(data) { // ottengo gli elementi <indirizzo>, <citta>, <telefono> e <email> var d = $(data).children().children(); // Elimino il contenuto del div "more" $(q.get(3)).empty(); // Inserisco del div "more" i dati ricevuti $(q.get(3)).append('<div class="indirizzo">Indirizzo: '+ $($(d).get(0)).text() +'</div>'); $(q.get(3)).append('<div class="citta">Città: '+ $($(d).get(1)).text() +'</div>'); $(q.get(3)).append('<div class="telefono">Telefono: '+ $($(d).get(2)).text() +'</div>'); $(q.get(3)).append('<div class="email">Email: '+ $($(d).get(3)).text() +'</div>'); // Visualizzo il pannello con effetto slide ;-) $(q.get(3)).slideToggle("slow"); }); }); }); }
La parte fondamentale è la funzione writeContacts che ha come parametri l’indice del record dal quale partire ed il numero di record da visualizzare per pagina. Questa viene dapprima richiamata quando apriamo la pagina dati.html (ovvero quando viene lanciato l’evento “ready” di jQuery) e poi quando l’utente fa click su “Indietro” o “Avanti”.
Si nota che tramite l’utilizzo di jQuery, effettuare una richiesta Ajax diventa molto semplice: basta utilizzare la funzione $.post(), che prende come parametri il nome dello script lato server, l’insieme dei parametri da spedire e la funzione da eseguire nel momento in cui lo script ci invia la risposta. Altresì semplice è la gestione degli eventi, quale ad esempio il click su di un oggetto. Nel codice ho infatti prima selezionato tutti gli elementi che hanno classe “contatto” con $(“.contatto”) e poi ho impostato per tutti che all’evento onClick si esegua una certa function con $(“.contatto”).click(function() { … });
Codice Sorgente: Ajax jQuery 1 (127)
Recent Comments