AJAX: Cos’è, e come si usa!

La lezione di oggi, prevede la spiegazione base di come si usa AJAX!

In anzitutto iniziamo a dire cos’è AJAX e cosa significa l’acronimo:

AJAX significa Asynchronous JavaScript and XML ed è una tecnica di sviluppo web per creare applicazioni web interattice (come riporta Wikipedia).

L’intento di tale tecnica è quello di ottenere pagine web che rispondono in maniera più rapida, grazie allo scambio in background di piccoli pacchetti di dati con il server, così che l’intera pagina web non debba essere ricaricata ogni volta che l’utente effettua una modifica. Questa tecnica riesce, quindi, a migliorare l’interattività, la velocità e l’usabilità di una pagina web.

Quindi, con AJAX noi possiamo richiamare delle pagine esterne, modificando una parte della pagina che stiamo visualizzando sul browser, ma tutto ciò senza aggiornare la Pagina!!!

La tecnica Ajax utilizza una combinazione di:

– HTML per la struttura

– CSS per lo stile

– DOM (Document Object Model) manipolato con Javascript

– L’oggetto XMLHttpRequest usato per scambiare i pacchetti di dati.

– XML, formato in cui generalmente verranno scambiati i dati.

Ma passiamo alla Pratica Ora!

Pretto che bisogna che voi sappiate almeno la sintassi di Javascript, altrimenti capirete a stento la Guida!

Create 3 file: esempio.php, prova.js, prova.php (esempio.php conterrà l’html della pagina che visualizzeremo, prova.js conterrà il codice AJAX, prova.php sarà la pagina che richiameremo con AJAX)

Apriamo il file esempio.php e scriviamo il codice:

<script type="text/javascript" src="prova.js"></script>
<a href="javascript:esempio(5);">
Prova
</a>
<div id='messaggio'></div>

In questo modo avremo incluso lo script js, ed avremo creato un link cliccabile che richiama la funzione esempio ed infine un div vuoto con id messaggio dove verrà mostrato l’output della pagina richiamata con AJAX.

Ora apriamo il file prova.php ed inseriamo il codice (è commentato per capire meglio):

< ?php
	
	// id ottenuto dalla funzione AJAX
	$id = $_GET&#91;'id'&#93;;
	
	// moltiplico per 2 per provare che il php funziona
	$num = $id * 2;
	
	// stampo il numero
	print("Numero: $id, Moltiplicato per 2 = $num");
	
	// stampo l'ora in modo da far vedere che è una richiesta sincrona
	print("<br />Solo le Ore: ". date("H:i:s"));

?>

Ora non ci resta che inserire il codice AJAX nel file prova.js, che spiegherò dopo:

//Creazione dell'oggetto xmlhttp
function assegnaXMLHttpRequest() {
var
XHR = null,
browserUtente = navigator.userAgent.toUpperCase();

if(typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")
XHR = new XMLHttpRequest();
else if(window.ActiveXObject && browserUtente.indexOf("MSIE 4") < 0) {
if(browserUtente.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
};

function esempio(id) {

//Creo l'oggetto xmlhttp
var ajax = assegnaXMLHttpRequest();

// elemento è il div dove visualizzare il risultato della pagina
var elemento = document.getElementById('messaggio');

// se l'oggetto è creato
if(ajax)
{
// apre la connessione in GET con la pagina prova.php passando la variabile id
ajax.open("get", "prova.php?id=" + id, true);

ajax.setRequestHeader("connection", "close");

// al cambio di stato
ajax.onreadystatechange = function()
{

// verifica dello stato
if(ajax.readyState === readyState.COMPLETATO)
{
// verifica della risposta da parte del server
if(statusText[ajax.status] === "OK")
{
// riempie il div con dati printati dalla pagina php
elemento.innerHTML = ajax.responseText;
return true;
} else {
// errore di caricamento
elemento.innerHTML = "Impossibile effettuare l'operazione richiesta.<br />Errore riscontrato: " + statusText[ajax.status];
return false;
}
} else if(ajax.readyState === readyState.INATTIVO) {
elemento.innerHTML = "Stato: Inattivo...";
} else if(ajax.readyState === readyState.INIZIALIZZATO) {
elemento.innerHTML = "Comando Inizializzato...";
} else if(ajax.readyState === readyState.RICHIESTA) {
elemento.innerHTML = "Invio Richiesta...";
} else if(ajax.readyState === readyState.RISPOSTA) {
elemento.innerHTML = "Ricezione Riposta...";
}
}
// invio richiesta
ajax.send(null);
}
};

// oggetto di verifica stato
var readyState = {
INATTIVO:    0,
INIZIALIZZATO:    1,
RICHIESTA:    2,
RISPOSTA:    3,
COMPLETATO:    4
};

// array descrittivo dei codici restituiti dal server
// [la scelta dell' array è per evitare problemi con vecchi browsers]
var statusText = new Array();
statusText[100] = "Continue";
statusText[101] = "Switching Protocols";
statusText[200] = "OK";
statusText[201] = "Created";
statusText[202] = "Accepted";
statusText[203] = "Non-Authoritative Information";
statusText[204] = "No Content";
statusText[205] = "Reset Content";
statusText[206] = "Partial Content";
statusText[300] = "Multiple Choices";
statusText[301] = "Moved Permanently";
statusText[302] = "Found";
statusText[303] = "See Other";
statusText[304] = "Not Modified";
statusText[305] = "Use Proxy";
statusText[306] = "(unused, but reserved)";
statusText[307] = "Temporary Redirect";
statusText[400] = "Bad Request";
statusText[401] = "Unauthorized";
statusText[402] = "Payment Required";
statusText[403] = "Forbidden";
statusText[404] = "Not Found";
statusText[405] = "Method Not Allowed";
statusText[406] = "Not Acceptable";
statusText[407] = "Proxy Authentication Required";
statusText[408] = "Request Timeout";
statusText[409] = "Conflict";
statusText[410] = "Gone";
statusText[411] = "Length Required";
statusText[412] = "Precondition Failed";
statusText[413] = "Request Entity Too Large";
statusText[414] = "Request-URI Too Long";
statusText[415] = "Unsupported Media Type";
statusText[416] = "Requested Range Not Satisfiable";
statusText[417] = "Expectation Failed";
statusText[500] = "Internal Server Error";
statusText[501] = "Not Implemented";
statusText[502] = "Bad Gateway";
statusText[503] = "Service Unavailable";
statusText[504] = "Gateway Timeout";
statusText[505] = "HTTP Version Not Supported";
statusText[509] = "Bandwidth Limit Exceeded";

Spieghiamo il codice:

La funzione assegnaXMLHttpRequest, serve a creare l’oggetto ajax per i comandi.

La funzione esempio(id) è quella che sarà richiamata dal link nella pagina con il codice html e richiederà come parametro un numero che verrà passato alla pagina da richiamare. La funzione al suo interno è composta nel seguente modo:

Creiamo 2 oggetti, uno è ajax che permette i comandi, e l’altro è elemento che è il div vuoto nell’html.

Con ajax.open apriamo una richiesta verso la pagina php in GET passando in querystring il parametro della funzione esempio.

Con ajax.onreadystatechange controlliamo che lo stato della richiesta cambia.

Infine quando la richiesta è completata (ci sono i vari if che controllano), con il codice: elemento.innerHTML = ajax.responseText; scriviamo nel div vuoto, la risposta ottenuta dalla richiesta AJAX.

Alla fine abbiamo ajax.send(null); che invia la richiesta AJAX, come parametro abbiamo passato null perchè facciamo la richiesta in GET, se era in POST al posto di null dovevamo inserire le variabili da passare in formato querystring.

Ok, prova aprite il file esempio.php (ovvio che siccome è php, dovete avviarlo in un server locale oppure dovete upparlo sul vostro host per funzionare), e cliccate sul link PROVA, vedrete che il div si riempirà con i dati ottenuti dalla pagina prova.php, senza aggiornare la pagina!