fetch-ის მუშაობის საფუძვლები AJAX-ში

ახლა ვნახოთ, როგორ ჩავტვირთოთ გვერდის ნაწილი AJAX-ის საშუალებით. დავუშვათ, რომ ჩვენს გვერდზე index.html განთავსებულია div და ღილაკი (აქ ნაჩვენებია body-ის შიგთავსი):

<div></div>
<button>დააკლიკე მე</button>

დავუშვათ, რომ ჩვენ ასევე გვაქვს გვერდი ajax.html, რომელზეც განთავსებულია სამი აბზაცი (გვერდის ტეგების გარეშე, უბრალოდ აბზაცები):

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

მოდით, გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას გვერდზე index.html div-ში ჩაიტვირთოს გვერდის 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); // გვერდის ტექსტი
		}
	);
});

ასე რომ, ჩვენ საბოლოოდ მივიღეთ მოთხოვნილი გვერდის ტექსტი და შეგვიძლია, მაგალითად, ჩავწეროთ იგი ჩვენს div-ში:

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

მოცემულია სამი ღილაკი და div. სერვერზე მოცემულია სამი გვერდი. გააკეთეთ ისე, რომ თითოეულმა ღილაკმა ჩატვირთოს div-ში შესაბამისი გვერდი.

დავუშვათ, სერვერზე არის ხუთი გვერდი. დავუშვათ ღილაკზე პირველი დაჭერა ჩატვირთავს პირველ გვერდს, მეორე დაჭერა - მეორეს, და ასე სანამ გვერდები არ ამოიწურება.