Usare Ajax tramite una api di JQuery

Tramite un’api di JQuery possiamo usare l’Ajax in modo rapido e utilizzando tutte le sue funzionalità (1)

Ajax è un potente strumento per gestire eventi in tempo reale nonostante l’uso di linguaggi lato server come php.
Come sa ogni programmatore con un minimo di esperienza nel campo, il php viene interpretato da un server: quello che vediamo a schermo è solo il risultato del processo. Non ci è possibile, quindi, eseguire uno script php in tempo reale una volta caricata la pagina (per esempio, non possiamo sostituire il contenuto di un div con un elemento estratto dal database in tempo reale: dobbiamo per forza ricaricare la pagina).

Questa operazione, però, ci è possibile farla appoggiandosi ad Ajax. Un’infarinatura di base, completa di esempio, l’abbiamo vista in un articolo precedente.

Esistono però delle soluzione alternative e più moderne a quelle viste nell’articolo. Jquery, per esempio, integra un’api capace di semplificarci la vita e di accedere alle funzionalità di Ajax in pochi passaggi.
Il concetto è lo stesso del precedente, ma eseguito in un minor numero di passaggi.

Lo script qui sotto (e che potete scaricare in formato zip) mostra un esempio molto semplice di utilizzo dell’Ajax tramite l’api di Jquery. In breve:
– al click sull’unico link della pagina, verrà richiamata la funzione javascript “stampa_blocchi()”. Come parametro gli passiamo un ipotetico valore “blocco1”.
– tramite ajax eseguiremo il file esterno “prova.php”. Questo riceverà il post $_POST[‘tipo’] che avrà valore “blocco1”. Il codice contenuto nel file “prova.php” viene tralasciato perché non necessario alla spiegazione: in ogni modo, tutto quello che sarà eleborato in questo file sarà poi restituito dall’ajax.
– il contenuto elaborato nel file “prova.php” sarà ritornato e stampato all’interno del div con id=stampa_blocchi

Scarica gli script di questo articolo in formato zip

Il codice nel dettaglio

Il codice è sempre più comprensibile della spiegazione, per cui diamo un’occhiata nel dettaglio alla funzione stampa_blocchi().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function stampa_blocchi(valore){

	//apre prova.php e gli indica che i valori passati devono essere considerati POST
	var request=$.ajax({
		url: "prova.php",
		type: "POST",
		data: {tipo: valore},
		dataType: "html"
	});

	//una volta che il file prova.php è stato elaborato, lo stampa nell'id
	request.done(function(msg) {
		$("#stampa_blocchi").html( msg ); //
	});

	request.fail(function(jqXHR, textStatus) {
		alert( "Request failed: " + textStatus );
	});

}

La chiamata ajax sarà immagazzinata nella variabile “request”. Se notate, è qui che abbiamo indicato quale sarà il file da elaborare (prova.php), quali post passargli ($_POST[‘tipo’]=valore) e che il risultato sarà stampato in formato html.
La seconda parte indica che, una volta elaborata la richiesta, il contenuto risultato sarà visualizzato nell’elemento della pagina che avrà id=”stampa_blocchi”. Nel nostro caso sarà stampato entro:

1

<div id="stampa_blocchi"></div>

Niente di particolarmente complicato. Le potenzialità di questa api Jquery, a ogni modo, sono davvero impressionanti.
Nella documentazione che trovate sotto avete un elenco completo dei parametri utilizzabili.

La documentazione completa dell’uso di ajax tramite jquery

(1) http://wpmu.org/free-ajax-wordpress-plugins/