Fetchi töötamise põhitõed AJAX-is

Vaatame nüüd, kuidas saab lehe osa AJAXi abil laadida. Oletame, et meie lehel index.html on div ja nupp (siin on näidatud body sisu):

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

Oletame, et meil on ka leht ajax.html, millel on kolm lõiku (ilma lehe siltideta, lihtsalt lõigud):

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

Teeme nii, et nupu vajutamisel lehel index.html laaditakse div-i lehe ajax.html sisu.

Selleks saame kõigepealt oma elementidele viited muutujatesse:

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

Lisame nupule klikirakenduri:

public/client.jsbutton.addEventListener('click', function() {
  // siin teostame AJAX päringu
});

Teostame nüüd AJAX päringu. Selleks kasutatakse funktsiooni fetch, mis parameetrina saab aadressi lehele, mille sisu me soovime saada. Määrame oma serveril asuva lehe ajax.html aadressi:

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

fetch tagastab tulemusena promisi. Asi on selles, et lehe pärimine AJAXi kaudu on asünkroonne tehe, sest möödub mõni aeg, mille jooksul leht meile vastab.

Saame promisi tulemuse:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // serveri vastus on muutujas response
  });
});

Lihtsustame, vabanedes lisamuutujast:

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

Lihtsustame, kasutades noolfunktsiooni:

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

Esitame loetavamal kujul:

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

Muutujas response on piisavalt keeruline Response klassi objekt:

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

Me uurime seda objekti sügavuti järgmistes õppetundides, kuid praegu vajame kõige lihtsamat - saada päritud lehe tekst. Selleks on selles objektis olemas meetod text. See meetod aga ei tagasta lehe teksti, vaid promisi selle tekstiga:

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

Lehe teksti saamiseks on vaja promisi, mis saadi response.text-ist, töödelda uuesti:

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

Niisiis, saime lõpuks päritud lehe teksti ja võime selle näiteks oma div-i kirjutada:

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