AJAX-da fetch bilan ishlash asoslari

Keling, endi sahifaning bir qismini AJAX yordamida qanday yuklashni ko'rib chiqaylik. Faraz qilaylik, bizning index.html sahifamizda div va tugma joylashgan (bu yerda body tarkibi ko'rsatilgan):

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

Faraz qilaylik, bizda ajax.html sahifasi ham bor, unda uchta abzas joylashgan (sahifa teglarisiz, oddiy abzaslar):

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

Keling, index.html sahifasidagi tugma bosilganda div ichiga ajax.html sahifasi tarkibi yuklansin.

Buning uchun avvalo elementlarga havolalarni o'zgaruvchilarga olaylik:

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

Keling, tugmaga klik hodisasi qo'shaylik:

button.addEventListener('click', function() {
	// bu yerda AJAX so'rovni bajaramiz
});

Keling, endi AJAX so'rovni bajaraylik. Buning uchun fetch funktsiyasi ishlatiladi, uning parametri sifatida biz o'z tarkibini olishni xohlaydigan sahifa manzilini ko'rsatamiz. Serverimizdagi ajax.html sahifasi manzilini ko'rsatamiz:

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

fetch o'z natijasi sifatida promise ni qaytaradi. Gap shundaki, AJAX orqali sahifa so'rovi - bu asinxron operatsiya, chunki sahifa bizga javob berishiga bir muncha vaqt ketadi.

Keling, promise natijasini olamiz:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// server javobi response o'zgaruvchisida yotadi
	});
});

Keling, ortiqcha o'zgaruvchilardan foydalanmaslik uchun soddalashtiramiz:

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

Keling, strelochniy funktsiyadan foydalanib soddalashtiramiz:

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

Keling, ko'proq o'qiladigan ko'rinishda ifodalaylik:

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

response o'zgaruvchisida Response sinfining ancha murakkab obyekti mavjud:

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

Ushbu obyektni chuqurroq biz keyingi darslarda o'rganamiz, hozircha bizga eng oddiy narsa kerak - so'ralgan sahifa matnini olish. Buning uchun ushbu obyektda text metodi mavjud. Biroq, ushbu metod sahifa matnini emas, balki uning matni bilan promiseni qaytaradi:

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

Sahifa matniga etib borish uchun, response.text dan olingan promiseni yana bir marta qayta ishlash kerak:

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

Xo'sh, nihoyat biz so'ralgan sahifa matnini oldik va, masalan, uni divimizga yozishimiz mumkin:

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

Uchta tugma va div berilgan. Serverda uchta sahifa berilgan. Har bir tugma divga mos keladigan sahifani yuklasin.

Faraz qilaylik, serverda beshta sahifa mavjud. Faraz qilaylik birinchí marta tugma bosilganda birinchi sahifa yuklansin, ikkinchi marta bosilganda - ikkinchi sahifa, va shu tartibda, sahifalar tugaguncha.