AJAX-те fetch жұмысының негіздері

Енді беттің бір бөлігін AJAX көмегімен қалай жүктеуге болатынын қарастырайық. Біздің index.html бетінде див және батырма болсын (мұнда body мазмұны көрсетілген):

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

Сондай-ақ бізде ajax.html беті болсын, онда үш абзац орналасқан (бет тегтері жоқ, жай абзацтар):

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

index.html бетіндегі батырманы басқанда ajax.html бетінің мазмұны дивге жүктелетіндей етейік.

Ол үшін алдымен элементтерге сілтемелерді айнымалыларға алайық:

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

Батырмаға түрткіні өңдеушіні қосамыз:

button.addEventListener('click', function() {
	// мұнда AJAX сұранысын орындаймыз
});

Енді AJAX сұранысын орындайық. Ол үшін fetch функциясы қолданылады, ол параметр ретінде мазмұнын алуды қалайтын беттің мекенжайын алады. Сервердегі ajax.html бетінің мекенжайын көрсетейік:

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

fetch нәтиже ретінде промис қайтарады. Себебі, AJAX арқылы бет сұрау - бұл асинхронды операция, өйткені бізге бет жауап беруі үшін белгілі бір уақыт өтеді.

Промис нәтижесін алайық:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// сервердің жауабы response айнымалысында жатады
	});
});

Артық айнымалыдан арылып, жеңілдетейік:

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

Стрелкалық функцияны пайдаланып, жеңілдетейік:

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

Оқуға ыңғайлы түрде көрсетейік:

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

response айнымалысында Response сыныбының жеткілікті күрделі нысаны бар:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response сыныбының нысаны
	});
});

Бұл нысанды тереңірек біз келесі сабақтарда зерттейміз, ал қазір бізге ең қарапайым нәрсе керек - сұралған беттің мәтінін алу. Ол үшін осы нысанда text әдісі бар. Бірақ бұл әдіс бет мәтінін емес, ол мәтінмен промис қайтарады:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise шығарады
		}
	);
});

Бет мәтініне жету үшін, response.text алынған промисді тағы бір рет өңдеу керек:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // беттің мәтіні
		}
	);
});

Сонымен, біз ақырында сұралған беттің мәтінін алдық және, мысалы, оны біздің дивге жаза аламыз:

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

Үш батырма және див берілген. Серверде үш бет берілген. Әр батырма дивге сәйкес бетті жүктейтіндей етіңіз.

Серверде бес бет болсын. Батырманы бірінші рет басқанда бірінші бет жүктелсін, екінші рет басқанда - екінші, және солай беттер аяқталғанша жалғасса.