A fetch alapjai az AJAX-ban

Most nézzük meg, hogyan tölthetünk be egy oldalrészt AJAX segítségével. Tegyük fel, hogy a index.html oldalunkon van egy div és egy gomb (itt a body tartalma látható):

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

Tegyük fel, hogy van egy ajax.html oldalunk is, amelyen három bekezdés található (oldalcímkék nélkül, csak bekezdések):

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

Állítsuk be úgy, hogy a index.html oldalon a gombra kattintáskor a div-be a ajax.html oldal tartalma töltődjön be.

Ehhez először szerezze be változókba az elemeinkre mutató hivatkozásokat:

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

Adjunk hozzá kattintáskezelőt a gombhoz:

button.addEventListener('click', function() {
	// itt fogjuk végrehajtani az AJAX kérést
});

Most hajtsuk végre az AJAX kérést. Ehhez a fetch függvényt használjuk, amely paraméterként megkapja annak az oldalnak a címét, melynek tartalmát meg szeretnénk kapni. Adjuk meg a szerverünkön lévő ajax.html oldal címét:

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

A fetch egy promise-al fog visszatérni. Az oka, hogy egy oldal lekérése AJAX-on keresztül aszinkron művelet, hiszen eltelik egy bizonyos idő, mielőtt az oldal válaszolna nekünk.

Szerezzük meg a promise eredményét:

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

	promise.then(function(response) {
		// a szerver válasza a response változóban található
	});
});

Egyszerűsítsük, megszabadulva a felesleges változótól:

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

	});
});

Egyszerűsítsük, nyílfüggvény használatával:

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

	});
});

Ábrázoljuk olvashatóbb formában:

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

		}
	);
});

A response változó egy meglehetősen összetett Response osztályú objektumot tartalmaz:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response osztályú objektum
	});
});

Ezt az objektumot részletesen a következő leckékben fogjuk tanulmányozni, egyelőre csak a legegyszerűbb dologra van szükségünk - megkapni a kért oldal szövegét. Ehhez ezen az objektumon létezik a text metódus. Ez a metódus azonban nem az oldal szövegét adja vissza, hanem egy promise-t a szövegével:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise-t fog kiírni
		}
	);
});

Ahhoz, hogy eljussunk az oldal szövegéhez, a response.text által visszaadott promise-t újra fel kell dolgoznunk:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // az oldal szövege
		}
	);
});

Tehát végül megkaptuk a kért oldal szövegét, és beírhatjuk például a div-be:

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

Adott három gomb és egy div. A szerveren adott három oldal. Állítsa be úgy, hogy minden gomb a hozzá tartozó oldalt töltse be a div-be.

Tegyük fel, hogy a szerveren öt oldal van. Állítsa be úgy, hogy az első gombnyomás betölti az első oldalt, a második nyomás a másodikat, és így tovább, amíg el nem fogynak az oldalak.