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;
		}
	);
});

Үч баскыч жана див берилген. Серверде үч баракча берилген. Ар бир баскыч дивге тиешелүү баракчаны жүктөөсүн жасагыла.

Серверде беш баракча бар болсун. Баскычка биринчи чыкылдаганда биринчи баракча жүктөлсүн, экинчи чыкылдаганда - экинчи, жана ошентип баракчалар бүткөнчө.