Bazele lucrului cu fetch în AJAX

Să analizăm acum cum se poate încărca o parte a unei pagini folosind AJAX. Să presupunem că pe pagina noastră index.html este situat un div și un buton (aici este afișat conținutul body):

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

Să presupunem că avem și pagina ajax.html, pe care sunt situate trei paragrafe (fără tag-uri de pagină, doar paragrafe):

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

Să facem astfel încât la click pe buton pe pagina index.html în div să se încarce conținutul paginii ajax.html.

Pentru aceasta, pentru început, vom obține în variabile referințele către elementele noastre:

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

Să atașăm butonului un handler de click:

button.addEventListener('click', function() {
	// aici vom executa cererea AJAX
});

Să executăm acum cererea AJAX. Pentru aceasta este folosită funcția fetch, care primește ca parametru adresa paginii, al cărei conținut îl dorim. Să indicăm adresa paginii ajax.html de pe serverul nostru:

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

Ca rezultat, fetch va returna un promise. Faptul este că cererea unei pagini prin AJAX - este o operație asincronă, deoarece va trece ceva timp până când pagina ne va răspunde.

Să obținem rezultatul promise-ului:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// răspunsul serverului se află în variabila response
	});
});

Să simplificăm, eliminând variabila redundantă:

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

Să simplificăm, folosind o funcție săgeată:

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

Să reprezentăm într-o formă mai lizibilă:

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

În variabila response este conținut un obiect suficient de complex de clasa Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // obiect de clasa Response
	});
});

Vom studia acest obiect în profunzime în lecțiile următoare, dar pentru moment avem nevoie de cel mai simplu lucru - să obținem textul paginii solicitate. Pentru aceasta, în acest obiect există metoda text. Această metodă, însă, nu returnează textul paginii, ci un promise cu textul acesteia:

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

Pentru a ajunge la textul paginii, este necesar să procesăm promise-ul obținut din response.text, încă o dată:

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

Deci, am obținut în sfârșit textul paginii solicitate și putem, de exemplu, să îl scriem în div-ul nostru:

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

Sunt date trei butoane și un div. Pe server sunt date trei pagini. Faceți astfel încât fiecare dintre butoane să încarce în div pagina corespunzătoare.

Să presupunem că pe server există cinci pagini. Să presupunem că primul click pe buton încarcă prima pagină, al doilea click - a doua, și așa mai departe, până când paginile se termină.