Основе рада са fetch у AJAX-у

Хајде сада да погледамо како да учитамо део странице помоћу AJAX-а. Нека на нашој страници index.html буду смештени див и дугме (овде је приказан садржај body):

public/index.html<div></div>
<button>кликни ме</button>

Нека такође имамо страницу ajax.html, на којој су смештена три пасуса (без ознака странице, само пасуси):

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

Хајде да урадимо тако да при клику на дугме на страници index.html у див се учита садржај странице ajax.html.

За то да за почетак добијемо у променљиве референце на наше елементе:

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

Хајде да додамо на дугме руковаоца клика:

public/client.jsbutton.addEventListener('click', function() {
  // овде ћемо извршити AJAX захтев
});

Хајде сада да извршимо AJAX захтев. За то се користи функција fetch, параметром прима адресу странице, чији садржај желимо да добијемо. Назначимо адресу странице ajax.html на нашем серверу:

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

Својим резултатом fetch ће вратити обећање (promise). Ствар је у томе да је захтев странице преко AJAX-а - асинхрона операција, јер ће проћи извесно време пре него што нам страница одговори.

Хајде да добијемо резултат обећања:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // одговор сервера лежи у променљивој response
  });
});

Поједноставимо, уклонивши вишак променљиве:

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

Поједноставимо, искористивши стреличасту функцију:

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

Представимо у читљивијем облику:

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

У променљивој response садржан је довољно сложен објекат класе Response:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // објекат класе Response
  });
});

Детаљно овај објекат ћемо проучавати у следећим лекцијама, а за сада нам треба најједноставније - да добијемо текст тражене странице. За то у овом објекту постоји метод text. Овај метод, међутим, не враћа текст странице, већ обећање (promise) са њеним текстом:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // приказаће Promise
    }
  );
});

Да бисмо дошли до текста странице, потребно је обећање, добијено из response.text, обрадити још једном:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // текст странице
    }
  );
});

Дакле, коначно смо добили текст тражене странице и можемо, на пример, да га уписемо у наш див:

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