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):

public/index.html<div></div>
<button>click me</button>

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

public/ajax.html<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:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

Butona bir tıklama olay işleyicisi ekleyelim:

public/client.jsbutton.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:

public/client.jsbutton.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:

public/client.jsbutton.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:

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

Ok fonksiyonu kullanarak sadeleştirelim:

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

Daha okunabilir bir forma getirelim:

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

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

public/client.jsbutton.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:

public/client.jsbutton.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:

public/client.jsbutton.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:

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