Fondamenti di utilizzo di fetch in AJAX

Ora diamo un'occhiata a come caricare parte di una pagina utilizzando AJAX. Supponiamo che sulla nostra pagina index.html siano posizionati un div e un pulsante (qui viene mostrato il contenuto di body):

<div></div>
<button>click me</button>

Supponiamo inoltre che abbiamo una pagina ajax.html, su cui sono posizionati tre paragrafi (senza tag di pagina, solo paragrafi):

<p>1</p>
<p>2</p>
<p>3</p>

Facciamo in modo che cliccando sul pulsante sulla pagina index.html nel div venga caricato il contenuto della pagina ajax.html.

Per fare ciò, per prima cosa otteniamo in variabili i riferimenti ai nostri elementi:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Aggiungiamo un gestore di click al pulsante:

button.addEventListener('click', function() {
	// qui eseguiremo la richiesta AJAX
});

Ora eseguiamo la richiesta AJAX. Per fare ciò si utilizza la funzione fetch, che riceve come parametro l'indirizzo della pagina, il cui contenuto vogliamo ottenere. Specifichiamo l'indirizzo della pagina ajax.html sul nostro server:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

fetch restituirà come suo risultato una promise. Il fatto è che la richiesta di una pagina via AJAX è un'operazione asincrona, poiché passerà del tempo prima che la pagina ci risponda.

Otteniamo il risultato della promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// la risposta del server si trova nella variabile response
	});
});

Semplifichiamo, eliminando la variabile superflua:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

Semplifichiamo, utilizzando una funzione freccia:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

Rappresentiamolo in una forma più leggibile:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

Nella variabile response è contenuto un oggetto abbastanza complesso della classe Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // oggetto della classe Response
	});
});

Studieremo questo oggetto in profondità nelle prossime lezioni, per ora abbiamo bisogno della cosa più semplice - ottenere il testo della pagina richiesta. Per fare ciò, in questo oggetto esiste il metodo text. Tuttavia, questo metodo non restituisce il testo della pagina, ma una promise con il suo testo:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // restituirà Promise
		}
	);
});

Per arrivare al testo della pagina, è necessario elaborare nuovamente la promise, ottenuta da response.text:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // testo della pagina
		}
	);
});

Quindi, abbiamo finalmente ottenuto il testo della pagina richiesta e possiamo, ad esempio, inserirlo nel nostro div:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Sono dati tre pulsanti e un div. Sul server sono date tre pagine. Fate in modo che ciascuno dei pulsanti carichi nel div la pagina corrispondente.

Supponiamo che sul server ci siano cinque pagine. Fate in modo che la prima pressione sul pulsante carichi la prima pagina, la seconda pressione - la seconda, e così via, finché le pagine non sono terminate.