Osnove dela s fetch v AJAX

Poglejmo si zdaj, kako naložiti del strani z AJAX. Naj bo na naši strani index.html nameščen div in gumb (tukaj je prikazana vsebina body):

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

Naj imamo tudi stran ajax.html, na kateri so nameščeni trije odstavki (brez oznak strani, samo odstavki):

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

Naredimo tako, da ob kliku na gumb na strani index.html v div naloži vsebino strani ajax.html.

Za to najprej pridobimo v spremenljivke povezave na naše elemente:

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

Dodajmo gumbu obravnavalnik klika:

public/client.jsbutton.addEventListener('click', function() {
  // tukaj bomo izvedli AJAX zahtevek
});

Izvedimo zdaj AJAX zahtevek. Za to se uporablja funkcija fetch, ki kot parameter prejme naslov strani, katere vsebino želimo pridobiti. Določimo naslov strani ajax.html na našem strežniku:

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

Kot rezultat bo fetch vrnil promise. Stvar je v tem, da je zahteva strani prek AJAX-a asinhrona operacija, saj bo minil nekaj časa, preden nam stran odgovori.

Pridobimo rezultat promisa:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // odgovor strežnika je v spremenljivki response
  });
});

Poenostavimo, tako da se znebimo odvečne spremenljivke:

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

Poenostavimo z uporabo puščične funkcije:

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

Predstavimo v bolj berljivi obliki:

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

V spremenljivki response je vsebovan dokaj zapleten objekt razreda Response:

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

Ta objekt bomo podrobneje preučevali v naslednjih lekcijah, za zdaj pa potrebujemo najpreprostejše - pridobiti besedilo zahtevane strani. Za to v tem objektu obstaja metoda text. Vendar ta metoda ne vrne besedila strani, ampak promis z njenim besedilom:

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

Da pridemo do besedila strani, je treba promis, pridobljen iz response.text, obdelati še enkrat:

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

Torej, končno smo dobili besedilo zahtevane strani in ga lahko, na primer, zapišemo v naš div:

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