AJAX'ta fetch ile Çalışmanın Temelleri

Şimdi bir sayfanın bir kısmını AJAX kullanarak nasıl yükleyeceğimize bakalım. index.html sayfamızda bir div ve bir buton bulunsun (body içeriği burada gösterilmektedir):

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

Ayrıca ajax.html sayfamız da olsun, bu sayfada üç paragraf bulunsun (sayfa etiketleri olmadan, sadece paragraflar):

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

index.html sayfasındaki butona tıklandığında, div'in içine ajax.html sayfasının içeriğinin yüklenmesini sağlayalım.

Bunun için öncelikle elementlerimize referansları değişkenlere alalım:

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

Butona bir tıklama olay işleyicisi ekleyelim:

button.addEventListener('click', function() {
	// burada AJAX isteği yapacağız
});

Şimdi bir AJAX isteği yapalım. Bunun için fetch fonksiyonu kullanılır, parametre olarak içeriğini almak istediğimiz sayfanın adresini alır. Sunucumuzdaki ajax.html sayfasının adresini belirtelim:

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

fetch, sonuç olarak bir promise döndürecek. Bunun nedeni, AJAX ile bir sayfa istemenin asenkron bir işlem olmasıdır, çünkü sunucunun bize yanıt vermesi biraz zaman alacaktır.

Promise'in sonucunu alalım:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// sunucu yanıtı response değişkeninde
	});
});

Gereksiz değişkenden kurtularak sadeleştirelim:

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

Ok fonksiyonu kullanarak sadeleştirelim:

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

Daha okunabilir bir forma getirelim:

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

response değişkeni, Response sınıfından yeterince karmaşık bir nesne içerir:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response sınıfından bir nesne
	});
});

Bu nesneyi derinlemesine sonraki derslerde inceleyeceğiz, şimdilik en basit ihtiyacımız olan şey - istenen sayfanın metnini almaktır. Bunun için bu nesnede text metodu bulunur. Ancak bu metod, sayfanın metnini doğrudan değil, onun metniyle birlikte bir promise döndürür:

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

Sayfanın metnine ulaşmak için, response.text'den alınan promise'i bir kez daha işlemek gerekir:

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

Sonunda, istenen sayfanın metnini aldık ve örneğin, onu div'imize yazdırabiliriz:

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

Üç buton ve bir div verilmiştir. Sunucuda üç sayfa verilmiştir. Her bir butonun, div'e ilgili sayfayı yüklemesini sağlayın.

Sunucuda beş sayfa olduğunu varsayalım. Butona ilk tıklama birinci sayfayı, ikinci tıklama ikinci sayfayı yüklesin ve sayfalar bitene kadar bu şekilde devam etsin.