1. AJAX for dummies 1: Hello world
Conoscenze necessarie: HTML, JavaScript, CSS, un linguaggio server-side (per noi Java e suo uso in JSP), DOM.
Fonti:
http://javascript.html.it/guide/leggi/95/guida-ajax/
http://javascript.html.it/guide/leggi/24/guida-dom/
Teoria: AJAX sta per Asynchronous JavaScript And XML. Non si tratta di una tecnologia vera e propria, ma di un utilizzo di linguaggi esistenti, quali il JavaScript e XML per ottenere un dialogo client-server di tipo asincrono, ovvero scambio di dati che avviene in modo veloce e trasparente, in tempi separati dal caricamento della pagina.
Pratica:
pagina.html
<html>
<head><title>La mia prima applicazione AJAX</title>
<script language="Javascript">
//recupera l'elemento della pagina tramite l'id
function getById(id) {
var elem;
if(document.getElementById) elem = document.getElementById(id);
else elem = document.all[id];
return elem;
}
//recupera l'elemento XMLHttpRequest, che sarà il tramite per effettuare le chiamate
function getXHR() {
var XHR = null;
var 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 clicca() {
var ajax = getXHR();
if(ajax) {
ajax.open("get", "documento.txt", true);
ajax.onreadystatechange = function() {
if(ajax.readyState === 4) {
if (ajax.status == 200) {
getById("contenitore").innerHTML = ajax.responseText;
} else {
alert("KO: "+ajax.status);
}
}
}
ajax.send(null);
}
}
</script>
</head>
<body>
<input type="button" value="clicca" onclick="clicca()"/>
<div id="contenitore">
</div></body></html>
documento.txt
Hello AJAX World!!!
Analisi del codice:
La funzione getById(id) serve a recuperare un elemento in pagina tramite l’id (non il name!) e usa due metodologie per ottenere la compatibilità su più browser.
La funzione getXHR() recupera l’oggetto XMLHttpRequest, ovvero il tramite delle transazioni con l’application server. Anche questa fa delle operazioni per estendere la compatibilità con il browser. Questo oggetto è il fulcro di tutto il mondo AJAX, e i suoi metodi servono a effettuare le chiamate, monitorare lo stato della transazione, etc. etc.
La funzione clicca():
var ajax = getXHR(); recupero l’oggetto XMLHttpRequest.
if(ajax) se l’oggetto è stato recuperato (se il browser supporta XHR)
ajax.open("get", "documento.txt", true); chiamo il file documento.txt, utilizzando il metodo GET(come nei form, get mostra i parametri, post li nasconde, get ha limite di dimensione dati inviati, post è “un po’ più grosso”). i dettagli più in là
ajax.onreadystatechange = function() ridefinisco la funzione dell’oggetto ajax, che viene eseguita ad ogni cambiamento di stato della chiamata
if(ajax.readyState === 4) { se readyState è 4 (operazione terminata) e lo status è 200 (200 OK, come nell’http, ossia operazione terminata con successo) eseguo il codice
if (ajax.status == 200) {
getById("contenitore").innerHTML = ajax.responseText; prendi il testo inviato e “innestalo” nel tag con id contenitore (il div vuoto sotto il pulsante)
innerHTML è una proprietà di ogni tag della pagina, che indica i il contenuto del tag dall’apertura alla chiusura
nell’esempio:
<div id="contenitore"> ha un .innerHTML uguale a una stringa vuota(per la precisione è una battuta di invio). Dopo il clic sul pulsante sarà
</div>
<div id="contenitore">Hello AJAX World!!!</div>
Continua qui.
Domenica, 6 Gennaio 2008 a 17:06
[...] Diario di un programmatore qualunque Yet another java addicted space monkey on the road « 1. AJAX for dummies 1: Hello world [...]