Web

Fondamenti di Ajax

| Paolo Carilli

Salve ragazzi,
al giorno d’oggi è sempre più importante conoscere alcune nozioni AJAX (acronimo di Asynchronous JavaScript and XML) per migliorare le performance dei nostri siti internet.

Questo semplice articolo NON vuole essere una guida esaustiva di Ajax, ma fornire solo un semplice esempio del suo utilizzo.
Abbiamo bisogno di una pagina html in cui è presente un div vuoto così strutturato

 <div id="infoboxAJAX"></div>

Inoltre dobbiamo inserire nella sezione <head></head> il file ajax che creeremo

<head>
....
<script type="text/javascript" src="inc/ajax.js" ></script>
</head>

Una volta preparata la nostra pagina html, passiamo alla costruzione del file ajax.js.

File Ajax.js

Per poter utilizzare le proprietà di Ajax abbiamo bisogno di creare un oggetto ajax. Tra i vari browser, l’unico ad avere qualche problemi è InternetExplorer (strano vero!?) ma niente di che; utilizzando questa funzione sarà possibile ottenere l’oggetto ajax da noi richiesto, con ogni tipo di browser, IE compreso.

function checkXMLHttpRequest(){
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;
};

Questa è la funzione principale del nostro script che ci consente di maneggiare le proprietà ajax.

La parte più interessante arriva adesso. Vogliamo “riempire” il nostro div in maniera asincrona, per esempio al caricamento della pag, o al click di un pulsante o…quando vogliamo noi. Supponiamo di aver inserito nella nostra pagina html anche <body onload=”promoBox()”> in modo da richiamare la funzione promoBox ad ogni caricamento. La funzione in oggetto, contenuta nel file ajax.js sarà così scritta:

function promoBox(lang){
	var ajax = checkXMLHttpRequest();
	var promoDiv = document.getElementById("infoboxAJAX");
	if (ajax){
		ajax.open("get", "ajax.php", true);
		ajax.send(null);

		ajax.onreadystatechange= function(){
			if (ajax.readyState == 4 && ajax.statusText == "OK")
				if (ajax.responseText != ""){
					promoDiv.style.display = "block";
					promoDiv.innerHTML = ajax.responseText;
				}
				else
					promoDiv.style.display = "none";
		}
	}
}

Adesso cerchiamo di spiegare le linee di codice principali:

  • le linee 5 e 6 sono le responsabili dell’invio della richiesta asincrona; prepariamo una connessione di tipo GET ed inviamo la richiesta. Il file ajax.php si occupa di collegarsi al nostra DB, eseguire una query e stampare a schermo il risultato con una ECHO. Qualunque cosa stampata, verrà visualizzata.
  • la linea 8 si occupa di gestire la risposta del nostro ajax
  • dalla linea 9 alla linea 13 si valuta la risposta inviataci dal server; se ajax.readyState == 4 (operazione conclusa) e ajax.statusText == “OK”allora visualizzo il contenuto nel div con il comando 
    promoDiv.innerHTML = ajax.responseText;

Con questo frammento di codice è possibile gestire diverse interazioni asincrone come aggiornamenti di pagine o qualunque operazione decida il web master essere asincrona.. 😀

Spero di avervi aiutato.

Alla prossima.

Articoli correlati