A fetch alapjai az AJAX-ban

Most nézzük meg, hogyan tölthetünk be egy oldalrészt AJAX segítségével. Tegyük fel, hogy a index.html oldalunkon van egy div és egy gomb (itt a body tartalma látható):

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

Tegyük fel, hogy van egy ajax.html oldalunk is, amelyen három bekezdés található (oldalcímkék nélkül, csak bekezdések):

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

Állítsuk be úgy, hogy a index.html oldalon a gombra kattintáskor a div-be a ajax.html oldal tartalma töltődjön be.

Ehhez először szerezze be változókba az elemeinkre mutató hivatkozásokat:

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

Adjunk hozzá kattintáskezelőt a gombhoz:

public/client.jsbutton.addEventListener('click', function() {
  // itt fogjuk végrehajtani az AJAX kérést
});

Most hajtsuk végre az AJAX kérést. Ehhez a fetch függvényt használjuk, amely paraméterként megkapja annak az oldalnak a címét, melynek tartalmát meg szeretnénk kapni. Adjuk meg a szerverünkön lévő ajax.html oldal címét:

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

A fetch egy promise-al fog visszatérni. Az oka, hogy egy oldal lekérése AJAX-on keresztül aszinkron művelet, hiszen eltelik egy bizonyos idő, mielőtt az oldal válaszolna nekünk.

Szerezzük meg a promise eredményét:

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

  promise.then(function(response) {
    // a szerver válasza a response változóban található
  });
});

Egyszerűsítsük, megszabadulva a felesleges változótól:

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

  });
});

Egyszerűsítsük, nyílfüggvény használatával:

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

  });
});

Ábrázoljuk olvashatóbb formában:

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

    }
  );
});

A response változó egy meglehetősen összetett Response osztályú objektumot tartalmaz:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // Response osztályú objektum
  });
});

Ezt az objektumot részletesen a következő leckékben fogjuk tanulmányozni, egyelőre csak a legegyszerűbb dologra van szükségünk - megkapni a kért oldal szövegét. Ehhez ezen az objektumon létezik a text metódus. Ez a metódus azonban nem az oldal szövegét adja vissza, hanem egy promise-t a szövegével:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // Promise-t fog kiírni
    }
  );
});

Ahhoz, hogy eljussunk az oldal szövegéhez, a response.text által visszaadott promise-t újra fel kell dolgoznunk:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // az oldal szövege
    }
  );
});

Tehát végül megkaptuk a kért oldal szövegét, és beírhatjuk például a div-be:

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