Come descritto in altri articoli è possibile implementare in maniera autonoma le chiamate Ajax, realizzando una o più funzioni che con l’utilizzo dell’oggetto XMLHttpRequest e di alcune specifiche Javascript permettano di aggiornare gli elementi che compongono una pagina html.
A volte però, soprattutto in occasione di progetti più ampi e complessi, è utile ricorrere ad un prezioso alleato, il framework JQuery.

JQuery ci fornisce una struttura semplice e snella per implementare chiamare Ajax. La funzione in questione richiede all’utente una serie di informazioni come ad esempio: url della risorsa, parametri in input, tipo di dato restituito e fornisce sottofunzioni per gestire il buono o cattivo esito della richiesta.
Ecco la sintassi per implementare una semplice chiamata Ajax con JQuery:

$.ajax({
     type: "GET",
     dataType: "html",
     url: "pagina.php",
     data: "parametro=valore",
     success: function(dati){
                       // OPERAZIONI DA SVOLGERE IN CASO DI SUCCESSO
     }
     error: function(richiesta,stato,errori){
                   // OPERAZIONI DA SVOLGERE IN CASO DI INSUCCESSO
     }
});

Il codice appena visto è gia sufficiente per implementare Ajax con JQuery. Andando per ordine, analizziamo ciascun parametro:

TYPE : specifica la modalità di passaggio dei parametri, può essere GET o POST
DATATYPE : specifica il tipo di dato che la chiamata restituisce, può essere html, json, script o xml
URL : specifica l’url dello script lato server a cui effettuare la richiesta
DATA : specifica la stringa contenente gli eventuali parametri da passare allo script lato server
SUCCESS : racchiude la funzione da invocare nel momento in cui la richiesta Ajax vada a buon fine
ERROR : racchiude la funzione da invocare nel momento in cui la richiesta Ajax non vada a buon fine

Vediamo ora un esempio concreto di utilizzo Ajax con JQuery. Realizzeremo una funzione javascript che effettua la chiamata ad un file remoto che ha come unico scopo quello di restituire un testo che va ad aggiornare un div html. Per completare l’esempio, immaginiamo di dover passare un parametro alla pagina lato server.

function AggiornaDIV(id_div){
     // Prelevo il parametro da passare
     var parametro = document.getElementById('parametroDaPassare').value;

     // Effettuo la chiamata Ajax
     $.ajax({
          type: "GET",
          dataType: "html",
          url: "pagina.php",
          data: "parametro="+parametro,
          success: function(dati){
               // Aggiorno il contenuto del DIV con i dati ricevuti
               document.getElementById(id_div).innerHTML=dati;
          }
          error: function(richiesta,stato,errori){
               // Visualizzo un messaggio di errore in caso di chiamata fallita
               alert('Errore nella chiamata AJAX:'+errori);
          }
     });
}

In poche righe di codice si racchiude tutto ciò che ci serve per effettuare una chiamata AJAX. Esistono però numerosi parametri opzionali che in base alle diverse esigenze possono tornare utili per gli sviluppatori, ad esempio quelli più interessanti sono:

ASYNC : definisce se la chiamata deve essere sincrona o asincrona e assume valore true o false
CACHE : indica al browser se forzare o meno il ricaricamento dei dati anche se questi non sono cambiati, assume valore true e false
TIMEOUT : esprire il tempo (in millesecondi) dopo di cui una richiesta non ancora conclusa viene considerata fallita

Parametri come timeout e cache risultano essere molto utili quando si vuol limitare una richiesta Ajax. Mettere in cache l’esito di una richiesta ci permette di non sprecare tempo e impostare un timeout si evitano attese eterne per richieste che non avranno responso.

In conclusione ecco i riferimenti ufficiali:
- Scaricare JQUERY
- Documentazione ufficiale di JQuery

Ajax è una tecnica di sviluppo che permette lo scambio di dati in background tra browser e server web. Nasce dall’esigenza innanzitutto di aggiornare dinamicamente parti della pagina visualizzata dall’utente e per elaborare informazioni senza che queste interferiscano con la navigazione dell’utente.

L’uso di Ajax si cala in numerose situazione, tuttavia l’80% di chi utilizza questa tecnica lo fa innanzitutto per aggiornare un div, un paragrafo o comunque un blocco della pagina.
Per chi ha esperienza con Javascript e sa dove “mettere le mani”, realizzare ciò che è stato appena descritto risulta essere un lavoro abbastanza semplice ma alla lunga noioso; d’altro canto per chi è a digiuno di programmazione lato Client può risultare difficile e non di immediata comprensione realizzare un aggiornamento dinamico con Ajax.
A tale scopo ho riunito in alcune funzioni il cuore di Ajax dando vita ad uno script che ho chiamato AJAX GO.
La funzione ajax_go, opportunamente richiamata, permette a chiunque di implementare la tecnica Ajax evitando la scrittura di ulteriore codice. Basta includere il file ajax_go.js e chiamare la funzione quando risulta necessario.

Ad esempio se intendo aggiornare il contenuto di un div con id=’my_box’, chiamando uno script lato server (ad esempio codice.php) che restituisca il “nuovo” codice html da inserire nel div, chiamerò la funzione ajax_go così:

ajax_go('codice.php','my_box');

// Parametri della funzione:
// ajax_go(url dello script lato server,id del blocco html)

Per utilizzare da subito la funzione è necessario richiamare il codice, aggiungendo la riga sottostante nell’head html della pagina che utilizzerà Ajax:

<script type="text/javascript" src="http://www.donatantonio.net/script/ajax_go.js"></script>

Oppure è possibile scaricare Ajax Go(con un esempio di utilizzo) da qui…

Oppure puoi testare un esempio di utilizzo di Ajax Go cliccando qui…

Ecco invece il codice completo per chi è interessato:

/*
    AJAX GO - AJAX SEMPLICE E VELOCE
    Fabio Donatantonio 2010 - http://www.donatantonio.it/
*/
var myRequest = null;
var the_box = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function aggiornamento() {
    e = document.getElementById(the_box);
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e.innerHTML = myRequest.responseText;
    }
}

function ajax_go(url,id_box) {
    the_box = id_box;
    var r = Math.random();
    if(url.indexOf("?")==-1)
        url = url + "?rand="+escape(r);
    else
        url = url + "&rand="+escape(r);
    myRequest = CreateXmlHttpReq(aggiornamento);
    myRequest.open("GET",url);
    myRequest.send(null);
}

SINTASSI: ajax_go(url dello script lato server, id del blocco html);

In questo breve articolo vedremo come risolvere una situazione tipica di refresh di una pagina html/php.
Immaginiamo di voler effettuare il refresh di un’intera pagina html al verificarsi di un evento lato server, ad esempio al cambiamento di una variabile di sessione o al cambiamento di stato di un database.
In altre parole vorremmo ricaricare la pagina che visiona l’utente quando decide uno script lato Server e non un javascript lato client.
Realizzeremo essenzialmente due script:

• La pagina html/php da inviare al browser
• Lo script lato Server che controlla il refresh

Per implementare il meccanismo di refresh utilizzeremo PHP, Javascript e logicamente Ajax per gestire il processo di controllo in background.

Vediamo il codice php dello script di controllo:

<?php
// la variabile che utilizzeremo per verificare l'esito del controllo
// 0 se non è necessario il refresh
// 1 se è da effettuare il refresh
$esito = 0;

// effettuo alcuni controlli come ad esempio una query
// una modifica a variabili di sessione o altro - dipende da voi
// nel mio esempio controllo il numero di record in una tabella...
$db_host = "localhost";
$db_user = "user";
$db_password = "pass";
$db_database = "my_database";

$connessione=mysql_connect($db_host,$db_user,$db_password);
mysql_select_db($db_database,$connessione);

$query = "SELECT COUNT(*) AS conto  FROM tabella";
$result = mysql_query($query) or die (mysql_error());

$array = mysql_fetch_array($result);
if($array['conto']>1){
     $esito = 1;
}else{
     $esito = 0;
}

echo $esito;
?>

Vediamo ora la pagina html/php che verrà inviata al Client:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Fabio Donatantonio" />
<title>Pagina ricaricata dal server</title>
<script type='text/javascript'>
var conto = null;
/* Funzione che richiama il controllo ogni 10 secondi */
function countdown(){
	Data();
	conto = setTimeout("countdown()",10000);
}

/* Funzione che inizializza il motore Ajax */
var myRequest = null;
function CreateXmlHttpReq2(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

/* Funzione che verifica il responso della procedura di controllo
    se restituisce 1 allora effettua il refresh */
function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        if(myRequest.responseText=='1'){
        	var r = Math.random();
        	location.href = "index.php?rand="+escape(r)+"";
        }
    }
}

/* Funzione che invia la richiesta http alla funzione di controllo lato Server */
function Data(){
	var r = Math.random();
	myRequest = CreateXmlHttpReq2(myHandler);
	myRequest.open("GET","controllo.php?rand="+escape(r));
	myRequest.send(null);
}
</script>
</head>
<body>
<div align="center">
<fieldset class="corpo">
<legend>Refresh gestito dal Server</legend>
<div class='corpo'>
La pagina è stata aggiornata dal Server in data <?php date('d-m-Y')." alle ore ".date('G:i:s');?> !
</div>
<script type="text/javascript">
countdown();
</script>
</fieldset>
</div>
</body>
</html>

In questo esempio lo script javascript richiama la procedura di controllo in background ogni 10 secondi utilizzando Ajax. La procedura (controllo.php) restituisce 1 se è richiesto il refresh della pagina, 0 altrimenti.

Logicamente il file controllo.php va personalizzato alle proprie esigenze, così come può essere modificato l’intervallo tra un controllo e l’altro lato Server.
Questo esempio può essere ad esempio utile ad aggiornare una chat PHP qualora venga inserito un nuovo messaggio in database, evitando quindi che l’aggiornamento sia dipendente esclusivamente da un timer che non tiene conto dell’effettivo cambiamento di stato del database.

L’obiettivo è intrattenere il visitatore in attesa che un box, nel nostro caso un div, venga aggiornato tramite una richiesta Ajax.
Difatti nella maggior parte dei casi si rischia di abbandonare l’utente per un periodo variabile, in attesa che una parte della pagina venga aggiornata o modificata.
La tecnica che utilizzeremo è estremamente semplice ed applicabile a qualsiasi script già esistente; infatti non faremo uso del metodo onreadystatechange dell’oggetto xmlHttpReq ma semplicmente utilizzeremo un minimo di javascript per visualizzare un’immagine di attesa prima che il div venga rigenerato.

L’idea di base è questa:
Scriviamo nel DIV, prima di inviare la richiesta Ajax, l’immagine di loader. Una volta conclusa la richiesta l’immagine verrà sostituita dal contenuto richiesto.
Dopo aver visto il codice tratteremo brevemente pregi e difetti di questa soluzione.

<html>
<head><title>Aggiornamento DIV</title>
<script type="text/javascript">
var myRequest = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("box");
        e.innerHTML = myRequest.responseText;
    }
}

// la funzione che permette di ricaricare il contenuto del div BOX
function Ricarica(){
             // scrivo nel BOX l'elemento di attesa
	document.getElementById("box").innerHTML="<div align='center'><div align='center' style='background:#c0c0c0'><img src='loading.gif' alt='Attendi'/><br/>Sto aggiornando i dati...</div></div>";

             // effettuo la richiesta AJAX
	var r = Math.random();
	myRequest = CreateXmlHttpReq(myHandler);
	myRequest.open("GET","aggiornamento_div.php?rand="+escape(r));
	myRequest.send(null);
}
</script>
</head>
<body>
    <!-- di seguito il div BOX -->
    <div id='box' style='text-align:center'>
    ... Contenuto del DIV ...
    </div>
    <!-- di seguito il bottone per ricaricare il box -->
    <input type='button' value='Ricarica' onclick='Ricarica()' />
</body>
</html>

La parte essenziale dello script si racchiude nella funzione Ricarica nella quale prima di effettuare la richiesta (verso una pagina fittizia aggiornamento_div.php) abbiamo la scrittura di un’immagine di attesa all’interno del div e successivamente la richiesta.
L’effetto che avremo è che dal momento in cui agiremo sul bottone di ricarica e fino all’avvenuta ricezione del contenuto aggiornato, verrà presentato all’utente un’animazione (o volendo un testo) di attesa.

Concludiamo sottolineando che qualora si volesse controllare l’attesa per evitare tempi troppo lunghi o eventualmente la mancata ricezione del contenuto, questo script non fa al nostro caso. Bensì si dovrà monitorare lo stato della richiesta con il metodo readyState.
Questa soluzione è quindi utile quando si è certi che la richiesta andrà a buon fine e lo scopo è semplicemente quello di presentare un’attesa all’utente.

E’ possibile scaricare da qui il codice completo e funzionante (con script di aggiornamento div compreso).

L’obbiettivo di questo tutorial è realizzare un modulo di ricerca dinamico simile a quello fornito da Google.
Ciò di cui abbiamo bisogno a priori è di due tabelle nel nostro database:

• Una contenente esclusivamente delle chiavi ri ricerca o tag  (essenzialmente stringhe)
• Una invece contenente i dati, quindi ciò che cerchiamo

Realizzeremo un campo di input dove ad ogni aggiunta di caratteri da parte dell’utente, sarà presentata una finestra a comparsa con le possibili ricerche da effettuare.
In altre parole, tramite la tecnologia Ajax produrremo una query sul nostro database ad ogni aggiunta di caratteri nel campo del form.

Definiamo innanzitutto un semplice form:

<form method='post' name='ricerca' action='ricerca.php'>
	<table border="0">

	<tr><td>Ricerca:</td>
	<td><input type="text" name="testo" onkeyup='Cerca()'
	style="width:300px"/></td>
	<td><input type="submit" value="Cerca" /></td></tr>

	<tr><td></td><td><div id='box'
	style="width:300px"></div><td></td></tr>

	</table>
</form>

Senza soffermarci troppo sullo stile utilizzato, il quale è del tutto personalizzabile, notiamo la presenza di un div con id box che dovrà contenere le possibili chiavi di ricerca.
Da notare inoltre, l’attributo onkeyup per il campo di testo che ci permetterà di richiamare una funzione Ajax che di seguito andiamo a descrivere:

<script type="text/javascript">
var myRequest = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("box");
        e.innerHTML = myRequest.responseText;
    }
}

function Cerca() {
	var qualcosa = document.ricerca.testo.value;
    if(qualcosa.length>2){
    	var r = Math.random();
    	document.getElementById("box").style.display = "block";
    	myRequest = CreateXmlHttpReq(myHandler);
    	myRequest.open("GET","ricerca_chiavi.php?cercare="+escape(qualcosa)+"&r="+escape(r));
    	myRequest.send(null);
    }
}

function ConfermaChiave(){
	var chiave = document.ricerca.chiavi.options[document.ricerca.chiavi.selectedIndex].text;

	document.ricerca.testo.value=chiave;
	document.getElementById("box").style.display = "none";
}
</script>

Le funzioni CreateXmlHttpReq e myHandler sono le classiche funzioni che permettono di implementare una richiesta Ajax.
La funzione che ci permetterà di invocare una chiamata al server è la funzione Cerca che andremo brevemente a descrivere:
Innanzitutto preleviamo la stringa dalla form, controlliamo che questa non sia troppo corta per evitare di effettuare ricerche in relazione a soli 1 o 2 caratteri. Successivamente rendiamo visibile il contenuto del nostro box ed effettuiamo la chiamata ad una pagina (nel nostro caso PHP). L’inserimento di un valore random all’interno dell’url ci permette di ingannare il browser in caso di richieste uguali e quindi evitare il caching.
La funzione ConfermaChiave verrà descritta successivamente.
Andiamo ora a descrivere il file ricerca_chiavi.php:

<?php
  // prelevo la stringa da cercare
  $stringa = $_GET['cercare'];

  // preparo connessione al database
  $dbhost = "localhost";
  $dbname = "nome_database";
  $dbuser = "user";
  $dbpass = "password";

  // connessione a server mysql
  $conn = mysql_connect($dbhost,$dbuser,$dbpass)
  	or die("Impossibile collegarsi a MySQL.");

  // connessione a database
  mysql_select_db($dbname,$conn)
  	or die("Impossibile selezionare il database $dbname");

  // preparo la query
  // ATTENZIONE : la query è solo un esempio,
  // in questo caso interrogo una tabella
  // con tutte le possibili chiavi di ricerca
  $sql = "SELECT * FROM chiavidiricerca WHERE chiave='".$stringa."'";

  // effettuo la query
  $risultato = mysql_query($sql,$conn)
  	or die( "Errore: " . mysql_error() );

  // prelevo tutte le chiavi trovate
  // realizzo una select dalla quale l'utente sceglierà
  // la chiave di ricerca tra quelle proposte
  // (questo passo è personalizzabile utilizzando ad esempio un div)
  echo "<select name='chiavi' style='width:300px'
  size='6' onchange='ConfermaChiave()'>";
  while($chiavi = mysql_fetch_array($risultato))
  {
  echo "<option value='".$chiavi['id']."'>".$chiavi['chiave']."</option>";
  }
  echo "</select>";
?>

Lo script PHP effettua il lavoro lato server. Il suo compito è abbastanza semplice:
Effettua una query sul database e realizza una select che conterrà tutte le chiavi di ricerca trovate. Questa select sarà visibile all’interno del div box, quindi al disotto del modulo di ricerca.

Andiamo ora a descrivere il funzionamento della funzione javascript ConfermaChiave. Tale funzione viene invocata nel momento in cui l’utente seleziona dalla select una chiave di ricerca (vedi onchange), il suo compito è quello di rendere invisibile il box delle chiavi trovate e impostare nel campo di input della form la chiave scelta.

Il modulo dinamico in Ajax è così concluso, la successiva pressione della submit effettuerà la ricerca in database in relazione alla chiave precedentemente scelta.