Questo è il codice che uso, preso dall'esempio di questo sito.
codice:
<!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"></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.
";
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>
<div id="contenuto-dinamico">
Questo testo è stato inserito all'interno di un elemento di tipo div
con id univoco: contenuto-dinamico .
Per cambiare questo contenuto è sufficiente clickare su
<!-- è importante fare caso alla costruzione di questo link:
permette di leggere il testo anche senza AJAX -->
questo link.
</div>
</div>
</body>
</html>
mentre il file js contiene
codice:
// funzione per prendere un elemento con id univoco
function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
};
// funzione per assegnare un oggetto XMLHttpRequest
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;
};
/** OGGETTI / ARRAY */
// 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";