Fetchin perusteet AJAX:ssa

Katsotaan nyt, kuinka osa sivusta voidaan ladata käyttäen AJAXia. Olkoon sivullamme index.html div-elementti ja painike (tässä näytetään bodyn sisältö):

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

Olkoon meillä myös sivu ajax.html, jolla on kolme kappaletta (ilman sivun tunnisteita, vain kappaleita):

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

Tehdään niin, että napin painalluksella sivulla index.html diviin ladataan sivun ajax.html sisältö.

Tätä varten hankitaan ensin viittaukset elementteihimme muuttujiin:

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

Asetetaan painikkeelle klikkauksen käsittelijä:

public/client.jsbutton.addEventListener('click', function() {
  // täällä suoritetaan AJAX-pyyntö
});

Suoritetaan nyt AJAX-pyyntö. Tätä varten käytetään funktiota fetch, jonka parametrina on sen sivun osoite, jonka sisällön haluamme saada. Määritetään palvelimellamme olevan sivun ajax.html osoite:

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

fetch palauttaa tuloksenaan promisen. Asia on siinä, että sivun pyytäminen AJAXin kautta - on asynkroninen operaatio, sillä kuluu vähän aikaa, jonka kuluin sivu vastaa meille.

Saadaan promisen tulos:

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

Yksinkertaistetaan pois turha muuttuja:

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

Yksinkertaistetaan nuolifunktiota käyttäen:

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

Esitetään luettavammassa muodossa:

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

Muuttujassa response on melko monimutkainen Response-luokan olio:

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

Opiskelemme tätä oliota syvällisemmin seuraavissa oppitunneissa, mutta toistaiseksi tarvitsemme yksinkertaisinta - saadaksemme pyydetyn sivun tekstin. Tätä varten tässä oliossa on olemassa metodi text. Tämä metodi ei kuitenkaan palauta sivun tekstiä, vaan promisen sen tekstistä:

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

Päästäkseen sivun tekstiin, on promis, joka on saatu response.text:stä, käsiteltävä uudelleen:

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

Niin, saimme vihdoin pyydetyn sivun tekstin ja voimme esimerkiksi kirjoittaa sen diviimme:

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