Podstawy pracy z fetch w AJAX

Spójrzmy teraz, jak załadować część strony za pomocą AJAX. Niech na naszej stronie index.html będzie umieszczony div i przycisk (tutaj pokazano zawartość body):

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

Załóżmy, że mamy również stronę ajax.html, na której znajdują się trzy akapity (bez tagów strony, po prostu akapity):

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

Sprawmy, aby po kliknięciu przycisku na stronie index.html do diva załadowała się zawartość strony ajax.html.

Aby to zrobić, na początek pobierzmy do zmiennych referencje do naszych elementów:

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

Dodajmy do przycisku obsługę kliknięcia:

public/client.jsbutton.addEventListener('click', function() {
  // tutaj wykonamy zapytanie AJAX
});

Wykonajmy teraz zapytanie AJAX. Służy do tego funkcja fetch, która jako parametr przyjmuje adres strony, której zawartość chcemy uzyskać. Wskażmy adres strony ajax.html na naszym serwerze:

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

Wynikiem działania fetch będzie promise. Rzecz w tym, że żądanie strony przez AJAX to operacja asynchroniczna, ponieważ minie trochę czasu, zanim strona nam odpowie.

Odbierzmy wynik promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // odpowiedź serwera znajduje się w zmiennej response
  });
});

Uprośćmy, pozbywając się zbędnej zmiennej:

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

Uprośćmy, korzystając z funkcji strzałkowej:

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

Przedstawmy w bardziej czytelnej formie:

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

W zmiennej response znajduje się dość złożony obiekt klasy Response:

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

Ten obiekt będziemy dogłębnie badać w kolejnych lekcjach, a na razie potrzebujemy najprostszej rzeczy - uzyskać tekst żądanej strony. W tym obiekcie istnieje do tego metoda text. Ta metoda jednak nie zwraca tekstu strony, a promise z jej tekstem:

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

Aby dostać się do tekstu strony, należy promise uzyskany z response.text przetworzyć jeszcze raz:

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

A więc wreszcie otrzymaliśmy tekst żądanej strony i możemy, na przykład, wpisać go do naszego diva:

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