A questo punto si hanno tutte le informazioni per creare un primo applicativo in AJAX. Per concentrarsi solo sul codice utile è consigliabile mettere le funzioni più comuni su un file esterno, chiamato in questo caso utility.js e visionabile o scaricabile in questa pagina. Si consiglia inoltre di leggere i commenti presenti al suo interno.
Ecco il primo esempio di richiesta AJAX, scritto in xhtml 1.1 e compatibile con i validatori più conosciuti.
Listato 15. Importare un testo con AJAX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<title>HTML.it | AJAX | Primo esempio</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="HTML.it | Guida ajax, request testuale" />
<meta name="keywords" content="guida, ajax, remote scripting, esempio, esempi" />
<meta name="author" content="Andrea Giammarchi per HTML.IT" />
<script type="text/javascript" src="utility.js"><!--// ajax utility //--></script>
<script type="text/javascript"><!--//
// funzione di caricamento testo,
// accetta una stringa contenente
// il nome di un file da leggere
function caricaTesto(nomeFile) {
// variabili di funzione
var
// assegnazione oggetto XMLHttpRequest
ajax = assegnaXMLHttpRequest(),
// assegnazione elemento del documento
elemento = prendiElementoDaId("contenuto-dinamico"),
// risultato booleano di funzione
usaLink = true;
// se l'oggetto XMLHttpRequest non è nullo
if(ajax) {
// il link al file non deve essere usato
usaLink = false;
// impostazione richiesta asincrona in GET
// del file specificato
ajax.open("get", nomeFile, true);
// rimozione dell'header "connection" come "keep alive"
ajax.setRequestHeader("connection", "close");
// impostazione controllo e stato della richiesta
ajax.onreadystatechange = function() {
// verifica dello stato
if(ajax.readyState === readyState.COMPLETATO) {
// verifica della risposta da parte del server
if(statusText[ajax.status] === "OK")
// operazione avvenuta con successo
elemento.innerHTML = ajax.responseText;
else {
// errore di caricamento
elemento.innerHTML = "Impossibile effettuare l'operazione richiesta.<br />";
elemento.innerHTML += "Errore riscontrato: " + statusText[ajax.status];
}
}
}
// invio richiesta
ajax.send(null);
}
return usaLink;
}
//--></script>
<style type="text/css" media="all">
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 9pt;
background: #FFF;
color: #000;
}
h1 {
font-size: 12pt;
border-bottom: 1px solid silver;
color: #009;
}
</style>
</head>
<body>
<div>
<h1>Request Testuale</h1>
<div id="contenuto-dinamico">
Questo testo è stato inserito all'interno di un elemento di tipo div
con id univoco: contenuto-dinamico .<br />
Per cambiare questo contenuto è sufficiente clickare su
<!-- è importante fare caso alla costruzione di questo link:
permette di leggere il testo anche senza AJAX -->
<a href="testo.txt"
onclick="return caricaTesto(this.href);"
onkeypress="return this.onclick();"
tabindex="1">questo link</a>.
</div>
</div>
</body>
</html>
I commenti presenti nel codice JavaScript dovrebbero essere abbastanza esplicativi, i passaggi fondamentali sono:
- si verifica la possibilità di usare AJAX,
- si imposta la richiesta,
- si effettuano operazioni differenti a seconda che quest'ultima sia fallita o meno.
Note sull'accessibilità
È degno di nota anche il markup utilizzato nell'esempio. Infatti con o senza il supporto di XMLHttpRequest, sia che la pagina fosse XHTML, sia che non lo fosse, rimane salvaguardata l'accessibilità al testo. Questo grazie al modo in cui è costruito il link.
La doppia assegnazione dei due eventi, onclick ed onkeypress, potrebbe essere considerata superflua, considerando che il solo evento onclick è gestito da qualunque browser come pointer-indipendent e sfruttabile quindi da qualunque dispositivo di puntamento, tastiera compresa. Le regole sull'accessibilità però obbligano ancora gli sviluppatori più attenti a questo tema ad inserire il controllo su onkeypress.
Non è obiettivo di questa guida spiegare come gestire gli eventi della tastiera mentre è fondamentale capire che costruire un link in questo modo consente l'accesso al testo sia di utenti senza javascript sia dai robots, quali ad esempio i motori di ricerca, che fin'ora difficilmente indicizzano i contenuti asincroni richiamati in AJAX.
Il concetto della multi compatibilità ha un nome ben preciso: degradabilità.
Listato 16. Esempio base di link degradabile
<a href="pagina.html" onclick="return richiestaAsincrona(this.href);">pagina.html</a>