Grondbeginsels van werk met fetch in AJAX

Laat ons nou kyk hoe om 'n gedeelte van die bladsy met AJAX te laai. Laat op ons bladsy index.html 'n div en 'n knoppie wees (hier word die inhoud van body getoon):

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

Laat ons ook 'n bladsy ajax.html hê, waarop drie paragrawe is (sonder bladsy-tags, net paragrawe):

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

Laat ons maak dat by 'n klik op die knoppie op die bladsy index.html die inhoud van die bladsy ajax.html in die div gelaai word.

Om dit te doen, laat ons eers skakels na ons elemente in veranderlikes kry:

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

Laat ons 'n klik-handler op die knoppie plaas:

button.addEventListener('click', function() {
	// hier sal ons die AJAX-versoek uitvoer
});

Laat ons nou die AJAX-versoek uitvoer. Vir dit word die funksie fetch gebruik, wat as parameter die adres van die bladsy ontvang waarvan ons die inhoud wil kry. Laat ons die adres van die bladsy spesifiseer ajax.html op ons bediener:

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

As sy resultaat sal fetch 'n belofte teruggee. Die saak is dat 'n versoek om 'n bladsy via AJAX - dit is 'n asinchrone operasie, want dit sal 'n sekere tyd neem voordat die bladsy ons antwoord.

Laat ons die resultaat van die belofte kry:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// die bediener se antwoord lê in die veranderlike response
	});
});

Laat ons vereenvoudig deur die oorbodige veranderlike te verwijder:

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

Laat ons vereenvoudig deur die pylfunksie te gebruik:

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

Laat dit in 'n meer leesbare vorm voorstel:

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

In die veranderlike response is daar 'n redelik komplekse objek van klas Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // objek van klas Response
	});
});

Ons sal hierdie objek diepgaande in die volgende lesse bestudeer, maar vir nou het ons die eenvoudigste nodig - om die teks van die aangevraagde bladsy te kry. Vir dit bestaan daar 'n metode text in hierdie objek. Hierdie metode gee egter nie die bladsy-teks terug nie, maar 'n belofte met sy teks:

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

Om by die bladsy-teks uit te kom, is dit nodig om die belofte, verkry uit response.text, weer te verwerk:

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

So, ons het uiteindelik die teks van die aangevraagde bladsy gekry en kan dit byvoorbeeld in ons div skryf:

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

Gegee drie knoppies en 'n div. Op die bediener is drie bladsye gegee. Maak dat elkeen van die knoppies die ooreenstemmende bladsy in die div laai.

Laat daar vyf bladsye op die bediener wees. Laat die eerste druk op die knoppie die eerste bladsy laai, die tweede druk - die tweede, en so aan, totdat die bladsye op is.