Osnove rada sa fetch u AJAX-u

Hajde sada da pogledamo kako da delimično učitamo stranicu pomoću AJAX-a. Pretpostavimo da se na našoj stranici index.html nalazi div i dugme (ovde je prikazan sadržaj body):

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

Pretpostavimo da takođe imamo stranicu ajax.html, na kojoj se nalaze tri pasusa (bez tagova stranice, samo pasusi):

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

Hajde da postavimo tako da klikom na dugme na stranici index.html u div se učita sadržaj stranice ajax.html.

Za ovo prvo ćemo dobiti reference na naše elemente u promenljive:

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

Hajde da dodamo osluškivač za klik na dugme:

public/client.jsbutton.addEventListener('click', function() {
  // ovde ćemo izvršiti AJAX zahtev
});

Hajde sada da izvršimo AJAX zahtev. Za ovo se koristi funkcija fetch, koja kao parametar prima adresu stranice čiji sadržaj želimo da dobijemo. Navedimo adresu stranice ajax.html na našem serveru:

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

Kao svoj rezultat fetch će vratiti promis. Stvar je u tome što je zahtev stranice preko AJAX-a - asinhrona operacija, pošto će proći izvesno vreme pre nego što stranica odgovori.

Hajde da dobijemo rezultat promisa:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // odgovor servera se nalazi u promenljivoj response
  });
});

Pojednostavimo, otklanjajući suvišnu promenljivu:

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

Pojednostavimo, koristeći streličastu funkciju:

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

Predstavimo u čitljivijem obliku:

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

U promenljivoj response se nalazi dovoljno kompleksan objekat klase Response:

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

Ovaj objekat ćemo detaljnije proučavati u sledećim lekcijama, a za sada nam je potrebno najjednostavnije - da dobijemo tekst tražene stranice. Za ovo u ovom objektu postoji metod text. Ovaj metod, međutim, ne vraća tekst stranice, već promis sa njenim tekstom:

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

Da bismo došli do teksta stranice, potrebno je da promis, dobijen iz response.text, obradimo još jednom:

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

Dakle, konačno smo dobili tekst tražene stranice i možemo, na primer, da ga upišemo u naš div:

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