AJAX-da fetch ilə işləməyin əsasları

Gəlin indi bir səhifənin bir hissəsini AJAX ilə necə yükləyə biləcəyimizə baxaq. Tutaq ki, bizim index.html səhifəmizdə bir div və bir düymə yerləşir (burada body-nin məzmunu göstərilir):

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

Tutaq ki, bizim həmçinin ajax.html səhifəmiz var, onun üzərində üç abzas yerləşir (səhifə teqləri olmadan, sadəcə abzaslar):

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

Gəlin elə edək ki, index.html səhifəsindəki düyməyə klikləndikdə div-in içinə ajax.html səhifəsinin məzmunu yüklənsin.

Bunun üçün əvvəlcə bizim elementlərimizə istinadları dəyişənlərə əldə edək:

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

Gəlin düyməyə klik hadisəsi dinləyicisi əlavə edək:

button.addEventListener('click', function() {
	// burada AJAX sorğusu yerinə yetirəcəyik
});

Gəlin indi AJAX sorğusu yerinə yetirək. Bunun üçün fetch funksiyası istifadə olunur, parametr kimi məzmununu əldə etmək istədiyimiz səhifənin ünvanını alır. Serverimizdəki ajax.html səhifəsinin ünvanını göstərək:

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

fetch öz nəticəsi olaraq promise qaytaracaq. Məsələ burundadır ki, AJAX vasitəsilə səhifə sorğusu - bu asinxron əməliyyatdır, çünki səhifənin bizə cavab verməsi üçün müəyyən vaxt keçəcək.

Gəlin promise-in nəticəsini əldə edək:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serverin cavabı response dəyişənində yerləşir
	});
});

Artıq dəyişəndən qurtularaq sadələşdirək:

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

Ox funksiyasından istifadə edərək sadələşdirək:

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

Daha oxunaqlı formada təqdim edək:

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

response dəyişənində kifayət qədər mürəkkəb Response sinfinin obyekti yerləşir:

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

Bu obyekti dərin şəkildə növbəti dərslərdə öyrənəcəyik, halbuki hələlik bizə ən sadəsi lazımdır - sorğu edilmiş səhifənin mətnini əldə etmək. Bunun üçün bu obyektdə text metodu mövcuddur. Lakin bu metod səhifənin mətnini yox, onun mətni ilə promise qaytarır:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise çap edəcək
		}
	);
});

Səhifənin mətninə çatmaq üçün, response.text-dən əldə edilmiş promise-i bir daha emal etmək lazımdır:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // səhifənin mətni
		}
	);
});

Beləliklə, nəhayət sorğu edilmiş səhifənin mətnini əldə etdik və onu, məsələn, bizim div-ə yaza bilərik:

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

Üç düymə və bir div verilmişdir. Serverdə üç səhifə verilmişdir. Elə edin ki, hər bir düymə div-ə uyğun səhifəni yükləsin.

Tutaq ki, serverdə beş səhifə var. Tutaq ki, düyməyə birinci klik birinci səhifəni yükləyir, ikinci klik - ikinci səhifəni və s, səhifələr bitənə qədər.