Základy práce s fetch v AJAX

Pozrime sa teraz, ako načítať časť stránky pomocou AJAX. Nech na našej stránke index.html je umiestnený div a tlačidlo (tu je zobrazený obsah body):

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

Nech máme tiež stránku ajax.html, na ktorej sú umiestnené tri odseky (bez značiek stránky, jednoducho odseky):

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

Urobme tak, aby po kliknutí na tlačidlo na stránke index.html sa do div načítal obsah stránky ajax.html.

Na to najprv získajme do premenných odkazy na naše elementy:

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

Pridajme na tlačidlo obsluhu kliknutia:

public/client.jsbutton.addEventListener('click', function() {
  // tu vykonáme AJAX požiadavku
});

Vykonajme teraz AJAX požiadavku. Na to sa používa funkcia fetch, ktorá ako parameter dostáva adresu stránky, ktorej obsah chceme získať. Zadajme adresu stránky ajax.html na našom serveri:

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

Výsledkom fetch vráti promise. Vec sa má tak, že požiadavka stránky cez AJAX je asynchrónna operácia, pretože uplynie nejaký čas, kým nám stránka odpovie.

Získajme výsledok promisu:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // odpoveď servera je v premennej response
  });
});

Zjednodušme, zbavme sa nadbytočnej premennej:

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

Zjednodušme, použitím šípkovej funkcie:

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

Prezentujme v čitateľnejšej podobe:

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

V premennej response je obsiahnutý dosť zložitý objekt triedy Response:

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

Tento objekt budeme hlbšie študovať v nasledujúcich lekciách, zatiaľ potrebujeme najjednoduchšie - získať text požadovanej stránky. Na to v tomto objekte existuje metóda text. Táto metóda však nevracia text stránky, ale promis s jej textom:

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

Aby sme sa dostali k textu stránky, je potrebné promis získaný z response.text spracovať ešte raz:

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

Takže, konečne sme získali text požadovanej stránky a môžeme ho napríklad zapísať do nášho div:

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