Fetchin perusteet AJAX:ssa

Katsotaan nyt, kuinka osa sivusta voidaan ladata käyttäen AJAXia. Olkoon sivullamme index.html div-elementti ja painike (tässä näytetään bodyn sisältö):

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

Olkoon meillä myös sivu ajax.html, jolla on kolme kappaletta (ilman sivun tunnisteita, vain kappaleita):

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

Tehdään niin, että napin painalluksella sivulla index.html diviin ladataan sivun ajax.html sisältö.

Tätä varten hankitaan ensin viittaukset elementteihimme muuttujiin:

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

Asetetaan painikkeelle klikkauksen käsittelijä:

button.addEventListener('click', function() {
	// täällä suoritetaan AJAX-pyyntö
});

Suoritetaan nyt AJAX-pyyntö. Tätä varten käytetään funktiota fetch, jonka parametrina on sen sivun osoite, jonka sisällön haluamme saada. Määritetään palvelimellamme olevan sivun ajax.html osoite:

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

fetch palauttaa tuloksenaan promisen. Asia on siinä, että sivun pyytäminen AJAXin kautta - on asynkroninen operaatio, sillä kuluu vähän aikaa, jonka kuluin sivu vastaa meille.

Saadaan promisen tulos:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// palvelimen vastaus on muuttujassa response
	});
});

Yksinkertaistetaan pois turha muuttuja:

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

Yksinkertaistetaan nuolifunktiota käyttäen:

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

Esitetään luettavammassa muodossa:

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

Muuttujassa response on melko monimutkainen Response-luokan olio:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response-luokan olio
	});
});

Opiskelemme tätä oliota syvällisemmin seuraavissa oppitunneissa, mutta toistaiseksi tarvitsemme yksinkertaisinta - saadaksemme pyydetyn sivun tekstin. Tätä varten tässä oliossa on olemassa metodi text. Tämä metodi ei kuitenkaan palauta sivun tekstiä, vaan promisen sen tekstistä:

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

Päästäkseen sivun tekstiin, on promis, joka on saatu response.text:stä, käsiteltävä uudelleen:

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

Niin, saimme vihdoin pyydetyn sivun tekstin ja voimme esimerkiksi kirjoittaa sen diviimme:

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

Annettu kolme painiketta ja div. Palvelimella on annettu kolme sivua. Tee niin, että jokainen painike lataa diviin vastaavan sivun.

Olkoon palvelimella viisi sivua. Olkoon ensimmäinen painallus painikkeessa lataa ensimmäinen sivu, toinen painallus - toisen, ja niin edelleen, kunnes sivut loppuvat.