Avete problemi con AJAX?
La risposta è ovviamente “No, nessun problema” (cit.)!
AJAX
Su AJAX si dicono e si pensano cose favolose. C’è chi ne abusa e c’è chi non sa cosa farsene. C’è chi lo adora e chi, forse impaurito, lo odia. Per un non-informatico, AJAX è soltanto una squadra di calcio oppure un detersivo!
Insomma, su AJAX si dice davvero tutto ed il contrario di tutto! A mio avviso, è probabile che questo sia uno dei motivi cruciali della sua esplosione (parlo evidentemente dell’AJAX nel campo Web!). Mi spiego meglio: sembra che i non addetti ai lavori vedano in AJAX il principale elemento di sviluppo tecnologico degli ultimi anni, quasi un faro dell’innovazione tecnologica del Web di nuova generazione.
La verità, come sempre sta nel mezzo. L’approccio AJAX, infatti, è sempre esistito, almeno nella sua concezione naturale. E’ doveroso, a questo punto, fornire una breve definizione. Innanzitutto, AJAX è un acronimo: Asynchronous JAvascript and XML. Evitando di dilungarmi troppo, si tratta di lanciare chiamate in background da un client (il browser) ad un server Web. La chiamata viene effettuata con Javascript e, generalmente, la risposta del server è in formato XML.
Dicevo: è sempre esistito. Sì, perché chiamate di questo genere erano permesse anche con browser datati. Quest’approccio, però, era fortemente frenato dalla complessità, ma soprattutto dall’incompatibilità tra i browser. Tutto è cambiato grazie all’avvento ed alla diffusione di framework Javascript che ne astraggano e semplificano l’utilizzo, rimuovendo le incompatibilità. Il più famoso tra questi framework è certamente JQuery.
Veniamo ad un esempio concreto. Mentre scrivo il post in Wordpress, l’articolo (o, per meglio dire, la bozza di articolo) viene salvato automaticamente ad intervalli regolari di alcuni minuti. Ritengo che questo sia un ottimo esempio di buon utilizzo di AJAX. In questo caso, infatti, sarebbe impensabile ed improponibile far ricaricare la pagina al browser per permettere un salvataggio temporaneo!
Come si potrebbe implementare una cosa del genere?
Per semplicità, si immagini di avere una pagina HTML (write-and-autosave.html) che contiene un’unica textarea.
S’immagini, inoltre, di avere uno script client-side (ajax-autosave.js) che richiama, ogni 30 secondi, uno script server-side (save-tmp.php) che memorizza la bozza temporanea in un file.
Il codice HTML per write-and-autosave.html potrebbe essere:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Esempio AJAX</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="ajax-autosave.js" type="text/javascript"></script> </head> <body> <div id="container"> <h1>Esempio AJAX</h1> <p>Ciò che scrivi nella <em>textarea</em> viene salvato ogni 30 secondi.</p> <fieldset> <legend>Testo:</legend> <form id="test-form" method="post" action=""> <p><textarea id="text-to-save" name="text" rows="10" cols="50"></textarea></p> <p id="saved-message">La bozza non è ancora stata salvata.</p> </form> </fieldset> </div> </body> </html>
Da notare (riga 10) l’importazione del framework JQuery (recuperato dalle librerie pubbliche di Google) e l’importazione (riga 11) dello script ajax-autosave.js. Quest’ultimo si potrebbe presentare, in una versione semplicissima, come segue:
$(document).ready(function() {
// Avvia gli intervalli per il salvataggio
setInterval(function() {
// Testo da salvare:
var textToSave = $("#text-to-save").get(0).value;
// Il messaggio viene impostato come "in attesa"
$("#saved-message").html("Salvataggio in corso...");
// Chiamata AJAX allo script PHP:
$.post("save-tmp.php", {"text": textToSave}, function(data) {
// A salvataggio avvenuto, viene modificato il messaggio
$("#saved-message").html("Ultimo salvataggio bozza: " + new Date());
});
}, 30000);
});
Infine, lo script save-tmp.php:
<?php
$fileToSave = "saved-text.txt";
if (isset($_POST["text"])) {
file_put_contents($fileToSave, $_POST["text"]);
}
?>
(L’esempio completo è prelevabile da qui)
A questo articolo, seguirà un’interessante esempio di com’è possibile integrare in maniera più solida la comunicazione tra Javascript e PHP, sempre per mezzo di chiamate AJAX.