File ajax.html
<html>
<head>
<title>Caricamento testo</title>
<script type="text/javascript" src="script.js"></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>Richiesta testuale</h1>
<div id="dynamic">
Per cambiare questo contenuto è sufficiente clickare su
<!-- La richiesta funziona anche se il browser non supporta AJAX -->
<a href="prova.txt"
onclick="return loadText(this.href);"
onkeypress="return this.onclick();"
tabindex="1">questo link</a>.
</div>
</div>
</body>
</html>
File script.js
function myRequest(url, handler, args) {
function requestComplete() {
// Occorre gestire tutte le eccezioni per evitare che l’intera
// esecuzione si blocchi a causa di un errore nei parametri…
try {
// Valori minori di 4 indicano una richiesta non completata.
if(request.readyState != 4)
return;
// A questo punto può essere chiamato l’handler al quale
// passare risposta del server e argomento
// specificato dall’utente.
if(handler == null)
return;
handler(request, args);
} catch(e) {
// gestione errori…
}
};
function newRequest() {
var xmlHttp;
try {
// Si tratta di Mozilla, Firefox, Netscape, Opera o Safari?
xmlHttp = new XMLHttpRequest();
} catch(e) {
try {
// Si tratta di Internet Explorer?
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
// Altro tentativo per Internet Explorer?
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
// Altri tentativi o annullamento
xmlHttp = null;
}
}
}
return xmlHttp;
};
var isAjaxAvailable = false;
var request = newRequest();
if(request) {
isAjaxAvailable = true;
request.open("get", url, true);
request.setRequestHeader("connection", "close");
request.onreadystatechange = requestComplete;
request.send(null);
}
return isAjaxAvailable;
};
function getAnElementById(elementId) {
var element;
if(document.getElementById) {
element = document.getElementById(elementId);
} else {
element = document.all[elementId];
}
return element;
};
function myHandler(request, args) {
var element = getAnElementById("dynamic");
if(request.status != 200) {
element.innerHTML = request.responseText;
} else {
element.innerHTML = "[ERRORE " + request.status + "]";
element.innerHTML += "Impossibile effettuare l'operazione richiesta.";
}
};
function loadText(filename) {
return !myRequest(filename, myHandler, null);
};
File prova.txt:
Testo di prova!
Metti i 3 file nella stessa directory e apri col browser ajax.html. Questo programma fa una richiesta asincrona utilizzando AJAX. Modificando un po' la cosa, al posto di considerare la risposta alla richiesta come testo, puoi considerarla come XML e farne il parsing. Ma questo è il massimo che mi è stato spiegato in un'ora di lezione su AJAX!!!