GET-pyyntöjen lähettäminen AJAXin kautta JavaScriptissä

Opitaan nyt lähettämään dataa palvelimelle AJAX-pyynnössä. Palvelin tekee jotain tälle datalle ja lähettää meille takaisin tuloksen.

Testipalvelimemme käsittelee dataa, joka on lähetetty osoitteeseen /handler/:

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

Aloitetaan lähettämällä GET -pyyntö:

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

Haetaan lähetetty data palvelimen puolella:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // tulostaa 3
	}
}

Tehdään jotain tälle datalle ja lähetetään se takaisin:

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

Asiakaspuolella haetaan tulos ja tulostetaan se jonnekin:

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

Asiakkaalla on div ja painike. Painiketta painettaessa lähetä palvelimelle kaksi numeroa. Palvelimen tulee löytää lähetettyjen numeroiden summa. Tulos kirjoitetaan diviin.

Palvelimella on annettu taulukko. Palvelimen tulee odottaa, että parametrina lähetetään numero, ja se palauttaa taulukon elementin, joka vastaa tätä numeroa. Painiketta painettaessa lähetä palvelimelle jokin numero, ja palvelimen vastaus tulostetaan kappaleeseen.