Pagrindai dirbant su fetch AJAX

Dabar pažiūrėkime, kaip iš dalies įkelti puslapį naudojant AJAX. Tarkime, mūsų puslapyje index.html yra išdėstytas div ir mygtukas (čia parodyta body turinys):

public/index.html<div></div>
<button>spausk mane</button>

Tarkime, kad taip pat turime puslapį ajax.html, kuriame yra išdėstytos trys pastraipos (be puslapio tagų, tiesiog pastraipos):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

Padarykime taip, kad paspaudus mygtuką puslapyje index.html į div būtų įkeltas puslapio ajax.html turinys.

Norint tai padaryti, pirmiausia gaukime į kintamuosius nuorodas į mūsų elementus:

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

Uždėkime ant mygtuko paspaudimo apdorotoją:

public/client.jsbutton.addEventListener('click', function() {
  // čia atliksime AJAX užklausą
});

Dabar atlikime AJAX užklausą. Tam naudojama funkcija fetch, kuri parametru gauna puslapio adresą, kurio turinį norime gauti. Nurodykime puslapio adresą ajax.html mūsų serveryje:

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

Rezultatu fetch grąžins pažadą. Reikalas tas, kad puslapio užklausa per AJAX - tai asinchroninė operacija, nes praeis šiek tiek laiko, per kurį puslapis mums atsakys.

Gaukime pažado rezultatą:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // serverio atsakas yra kintamajame response
  });
});

Supaprastinkime, atsikratydami perteklinių kintamųjų:

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

Supaprastinkime, pasinaudoję rodykline funkcija:

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

Pateikime skaitomesne forma:

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

Kintamajame response yra pakankamai sudėtingas Response klasės objektas:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // Response klasės objektas
  });
});

Šį objektą išsamiai tyrinėsime kituose pamokose, o kol kas mums reikia paprasčiausio - gauti užklausto puslapio tekstą. Tam šiame objekte egzistuoja metodas text. Šis metodas, tačiau, grąžina ne puslapio tekstą, o pažadą su jos tekstu:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // išves Promise
    }
  );
});

Norint pasiekti puslapio tekstą, būtina pažadą, gautą iš response.text, apdoroti dar kartą:

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

Taigi, mes pagaliau gavome užklausto puslapio tekstą ir galime, pavyzdžiui, įrašyti jį į mūsų div:

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