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

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

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

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

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

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

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

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

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

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

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

Daha oxunaqlı formada təqdim edək:

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

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

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

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

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