Základy práce s fetch v AJAX

Pojďme se nyní podívat, jak načíst část stránky pomocí AJAX. Nechť na naší stránce index.html je umístěn div a tlačítko (zde je zobrazen obsah body):

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

Nechť máme také stránku ajax.html, na které jsou umístěny tři odstavce (bez tagů stránky, pouze odstavce):

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

Udělejme to, aby po kliknutí na tlačítko na stránce index.html se do div načetl obsah stránky ajax.html.

K tomu nejprve získáme do proměnných odkazy na naše elementy:

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

Nastavme na tlačítko obslužnou rutinu kliknutí:

public/client.jsbutton.addEventListener('click', function() {
  // zde budeme provádět AJAX požadavek
});

Nyní provedeme AJAX požadavek. K tomu se používá funkce fetch, jejímž parametrem je adresa stránky, jejíž obsah chceme získat. Uveďme adresu stránky ajax.html na našem serveru:

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

Výsledkem fetch bude promise. Jde o to, že požadavek na stránku přes AJAX - je asynchronní operace, protože uběhne nějaký čas, než nám stránka odpoví.

Získejme výsledek promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // odpověď serveru je v proměnné response
  });
});

Zjednodušme tím, že se zbavíme nadbytečné proměnné:

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

Zjednodušme pomocí šipkové funkce:

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

Uveďme v čitelnější podobě:

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

V proměnné response je obsažen dost složitý objekt třídy Response:

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

Tento objekt budeme podrobně studovat v následujících lekcích, zatím potřebujeme to nejjednodušší - získat text požadované stránky. K tomu v tomto objektu existuje metoda text. Tato metoda však nevrací text stránky, ale promise s jejím textem:

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

Abyste se dostali k textu stránky, je nutné promise získaný z response.text zpracovat znovu:

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

Takže jsme konečně získali text požadované stránky a můžeme jej například zapsat do našeho div:

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