Odosielanie GET požiadaviek cez AJAX v JavaScripte

Poďme sa teraz naučiť prenášať dáta na server v AJAX požiadavke. Server s týmito dátami niečo urobí a odošle nám späť výsledok.

Náš testovací server bude spracovávať dáta odoslané na adresu /handler/:

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

Na začiatok pošleme GET požiadavku:

button.addEventListener('click', function() {
	let promise = fetch('/handler/?num=3');
});

Poďme získať odoslané dáta na strane servera:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // vypíše 3
	}
}

Poďme s týmito dátami niečo urobiť a poslať ich späť:

export default {
	'/handler/': function({get}) {
		return get.num ** 2;
	}
}

Na strane klienta získame výsledok a vypíšeme ho niekam:

button.addEventListener('click', function() {
	fetch('/handler/?num=3').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text);
		}
	);
});

Na klientovi je daný div a tlačidlo. Po kliknutí na tlačidlo odošlite na server dve čísla. Nech server nájde súčet odoslaných čísel. Výsledok zapíšte do divu.

Nech je na serveri dané pole. Nech server očakáva, že parametrom bude odoslané číslo, a vráti prvok poľa zodpovedajúci tomuto číslu. Po kliknutí na tlačidlo odošlite na server nejaké číslo a odpoveď servera vypíšte do odseku.