Javascript e Ajax per aggiornare una pagina senza ricaricarla.

by Franco Desiderio / 24-05-2018 / 0
La velocità di esecuzione dei nostri scripts è sempre più importante per la fruizione dei servizi offerti ed inoltre influisce anche sui parametri di indicizzazione di Google. Di conseguenza se la normale interazione dell'utente costringe lo script ad accedere al database per aggiornare una parte della pagina, poter aggiornare senza ricaricare l'intera pagina diventa assai utile. Un esempio classico è quando abbiamo un form di selezione dati che devono poi essere elencati all'interno della stessa pagina. Anziché usare 'action' nel form per far ricaricare la pagina php si può usare uno script php separato che carica i dati dal nostro database inserendo nella pagina una chiamata Ajax allo stesso script. Vediamo come possono essere usati Javascript e Ajax in un esempio come quello indicato precedentemente.


Supponiamo di avere una pagina, che nel nostro esempio scriviamo ovviamente solo nelle linee essenziali, come quella che indichiamo qui di seguito. 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
	<div>
		<form>
			<div>
				<label for "_tit" style="margin-left:10px;">Titolo</label><br>
				<input style="width:300px;" type="text" id="_tit" name="_tit" value=''>
			</div>
			<div>
				<button type="button" onclick="submitForm();">Ricerca</button>
			</div>
		</form>
		<div>
			<ul id="lista_sel" style="background:#f4f4f4;padding:20px 10px; margin:30px 20px;">
			</ul>
		</div>
	</div>
</body>
</html>
La pagina nel nostro banale esempio si presenterà così
Abbiamo volutamente preparato una semplicissima pagina html, ma ovviamente maggiore è la complessità della pagina o la grandezza del database, maggiore sarà il vantaggio in termini di velocità che ne deriverà. Il richiamo della libreria jquery ci serve perché utilizzata dallo script javascript che andremo ad inserire. Come potete notare abbiamo inserito un blocco ove andremo a mostrare i risultati della ricerca, che inizialmente è vuoto e quindi non viene visualizzato. Lo script php che legge il database lo chiameremo _loaddb.php e accetterà il titolo (o parte di esso) come parametro GET. Andrà registrato come programma separato e richiamato con Ajax all'interno di uno script che avrà la seguente struttura: 
	<script>
		function submitForm() {
			var tit=document.getElementById("_tit").value;
			if (var1!=="") {
				let listaSel = $('#lista_sel');
				lista.empty();
				var url = '_loaddb.php?t='+tit;
				$.getJSON(url, function (data) {
					$.each(data, function (i, val) {
						var temp="<li><a href='showdetails.php?id="+data[i].id+"'>"+data[i].title+"</a> ("+data[i].year+")</li>";
						listaSel.append(temp);
					})
				});
			}
		}
	</script>
Lo script passa il testo inserito nel form al programma _loaddb.php e riceve in risposta una lista in formato json che andrà ad inserire all'interno del blocco <ul ... </ul> La clear del blocco (lista.empty();) viene inserita nel caso si reiteri il processo con ulteriori richieste. Il link su ciascuna riga della lista ottenuta è verso un ipotetico programma che mostra i dettagli dell'oggetto selezionato. Poiché abbiamo detto di usare json come risultato della ricerca da inserire nella lista, il programma _loaddb.php dovrà terminare con un'istruzione tipo: echo json_encode($recordEstratti); E' tutto. Il programmino nel suo insieme sarà quindi: 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
	<div>
		<form>
			<div>
				<label for "_tit" style="margin-left:10px;">Titolo</label><br>
				<input style="width:300px;" type="text" id="_tit" name="_tit" value=''>
			</div>
			<div>
				<button type="button" onclick="submitForm();">Ricerca</button>
			</div>
		</form>
		<div>
			<ul id="lista_sel" style="background:#f4f4f4;padding:20px 10px; margin:30px 20px;">
			</ul>
		</div>
	</div>
</body>
	<script>
		function submitForm() {
			var tit=document.getElementById("_tit").value;
			if (var1!=="") {
				let listaSel = $('#lista_sel');
				lista.empty();
				var url = '_loaddb.php?t='+tit;
				$.getJSON(url, function (data) {
					$.each(data, function (i, val) {
						var temp="<li><a href='showdetails.php?id="+data[i].id+"'>"+data[i].title+"</a> ("+data[i].year+")</li>";
						listaSel.append(temp);
					})
				});
			}
		}
	</script>
</html>

Commenti

(Occorre fare login per commentare - Se non sei registrato puoi farlo cliccando su "accedi")