Ajax è una tecnica di sviluppo che permette lo scambio di dati in background tra browser e server web. Nasce dall’esigenza innanzitutto di aggiornare dinamicamente parti della pagina visualizzata dall’utente e per elaborare informazioni senza che queste interferiscano con la navigazione dell’utente.
L’uso di Ajax si cala in numerose situazione, tuttavia l’80% di chi utilizza questa tecnica lo fa innanzitutto per aggiornare un div, un paragrafo o comunque un blocco della pagina.
Per chi ha esperienza con Javascript e sa dove “mettere le mani”, realizzare ciò che è stato appena descritto risulta essere un lavoro abbastanza semplice ma alla lunga noioso; d’altro canto per chi è a digiuno di programmazione lato Client può risultare difficile e non di immediata comprensione realizzare un aggiornamento dinamico con Ajax.
A tale scopo ho riunito in alcune funzioni il cuore di Ajax dando vita ad uno script che ho chiamato AJAX GO.
La funzione ajax_go, opportunamente richiamata, permette a chiunque di implementare la tecnica Ajax evitando la scrittura di ulteriore codice. Basta includere il file ajax_go.js e chiamare la funzione quando risulta necessario.
Ad esempio se intendo aggiornare il contenuto di un div con id=’my_box’, chiamando uno script lato server (ad esempio codice.php) che restituisca il “nuovo” codice html da inserire nel div, chiamerò la funzione ajax_go così:
1 | ajax_go('codice.php','my_box'); |
3 | // Parametri della funzione: |
4 | // ajax_go(url dello script lato server,id del blocco html) |
Per utilizzare da subito la funzione è necessario richiamare il codice, aggiungendo la riga sottostante nell’head html della pagina che utilizzerà Ajax:
Oppure è possibile scaricare Ajax Go(con un esempio di utilizzo) da qui…
Oppure puoi testare un esempio di utilizzo di Ajax Go cliccando qui…
Ecco invece il codice completo per chi è interessato:
08 | function CreateXmlHttpReq(handler) { |
11 | xmlhttp = new XMLHttpRequest(); |
14 | xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); |
16 | xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
19 | xmlhttp.onreadystatechange = handler; |
23 | function aggiornamento() { |
24 | e = document.getElementById(the_box); |
25 | if (myRequest.readyState == 4 && myRequest.status == 200) { |
26 | e.innerHTML = myRequest.responseText; |
30 | function ajax_go(url,id_box) { |
32 | var r = Math.random(); |
33 | if(url.indexOf("?")==-1) |
34 | url = url + "?rand="+escape(r); |
36 | url = url + "&rand="+escape(r); |
37 | myRequest = CreateXmlHttpReq(aggiornamento); |
38 | myRequest.open("GET",url); |
SINTASSI: ajax_go(url dello script lato server, id del blocco html);
