AJAX in pratica

Ecco il breve ma efficace tutorial di Rasmus Lerdorf su AJAX:

Trovo che AJAX sia un po' una montatura. Molte persone hanno usato tecniche simili, prima che queste fossero chiamate "AJAX". E non si tratta di cose complicate come molti fanno credere. Ecco un semplice esempio tratto da una mia applicazione. Iniziamo con il Javascript:

function createRequestObject() {
	var ro;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		ro = new XMLHttpRequest();
	}
	return ro;
}

var http = createRequestObject();

function sndReq(action) {
	http.open('get', 'rpc.php?action='+action);
	http.onreadystatechange = handleResponse;
	http.send(null);
}

function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		var update = new Array();

		if(response.indexOf('|' != -1)) {
			update = response.split('|');
			document.getElementById(update[0]).innerHTML = update[1];
		}
	}
}

Questo script definisce una funzione per la creazione di un oggetto Request, una funzione per l'invio di tale richiesta ed una funzione per la gestione della risposta. Per essere usato, questo script va inserito all'interno di una pagina web.
Per effettuare una richiesta al backend possiamo collegare tale script ad un evento "onClick" oppure direttamente all'attributo href di un link, nel seguente modo:

[foo]

Questo fa si che quando un utente clicca sul link venga inviata una richiesta alla pagina rpc.php?action=foo

Nel file rpc.php potremmo inserire qualcosa di simile:

switch($_REQUEST['action']) { 
	case 'foo': 
	/* do something */ 
	echo "foo|foo done"; 
	break; 

... 
}

Adesso osserviamo la funzione handleResponse. Essa effettua il parsing della stringa "foo|foo done" e la divide in 2 parti in modo da usare il testo che precede il carattere '|' come l'id di un elemento dom della pagina, ed il testo successivo al carattere '|' come il nuovo HTML da inserire in tale elemento dom. Ciò significa che se abbiamo nella pagina un tag div come il seguente:

una volta cliccato sul link di prima, tale tag cambierà in:

foo done

Questo è tutto. Tutto il resto sono solo evoluzioni di tale tecnica che sostituiscono la semplice risposta "id|text" con un formato XML più elaborato ed inoltre rendono la richiesta molto più complessa. Prima di installare alla cieca qualche voluminosa libreria "AJAX", bisognerebbe provare a realizzare tali funzionalità da soli in modo da comprenderne esattamente il funzionamento e aumentarne la complessità solo se necessario. Spesso infatti non serve più di quanto appena mostrato.

Per estendere questo approccio all'invio nella richiesta di più parametri si potrebbe semplicemente procedere così:

function sndReqArg(action,arg) { 
	http.open('get', 'rpc.php?action='+action+'&arg='+arg); 
	http.onreadystatechange = handleResponse; 
	http.send(null); 
}

Anche la funzione handleResponse può essere modificata affinché faccia qualcosa di più interessante di modificare il contenuto di un tag div.