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 саҳифасининг контенти дивга юклансин.

Буни амалга ошириш учun аввало элементларимизга ҳаволаларни ўзгартувчиларга оламиз:

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

Учта тугма ва див берилган. Серверда учта саҳифа берилган. Ҳар бир тугма дивга мос саҳифани юклаши учун тайёрланг.

Серверда бешта саҳифа мавжуд бўлсин. Тугманинг биринчи босиши биринчи саҳифани юкласин, иккинчи босиш - иккинчи саҳифани, ва ҳоказо, саҳифалар тугагунча.