Bazele lucrului cu fetch în AJAX

Să analizăm acum cum se poate încărca o parte a unei pagini folosind AJAX. Să presupunem că pe pagina noastră index.html este situat un div și un buton (aici este afișat conținutul body):

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

Să presupunem că avem și pagina ajax.html, pe care sunt situate trei paragrafe (fără tag-uri de pagină, doar paragrafe):

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

Să facem astfel încât la click pe buton pe pagina index.html în div să se încarce conținutul paginii ajax.html.

Pentru aceasta, pentru început, vom obține în variabile referințele către elementele noastre:

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

Să atașăm butonului un handler de click:

public/client.jsbutton.addEventListener('click', function() {
  // aici vom executa cererea AJAX
});

Să executăm acum cererea AJAX. Pentru aceasta este folosită funcția fetch, care primește ca parametru adresa paginii, al cărei conținut îl dorim. Să indicăm adresa paginii ajax.html de pe serverul nostru:

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

Ca rezultat, fetch va returna un promise. Faptul este că cererea unei pagini prin AJAX - este o operație asincronă, deoarece va trece ceva timp până când pagina ne va răspunde.

Să obținem rezultatul promise-ului:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // răspunsul serverului se află în variabila response
  });
});

Să simplificăm, eliminând variabila redundantă:

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

Să simplificăm, folosind o funcție săgeată:

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

Să reprezentăm într-o formă mai lizibilă:

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

În variabila response este conținut un obiect suficient de complex de clasa Response:

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

Vom studia acest obiect în profunzime în lecțiile următoare, dar pentru moment avem nevoie de cel mai simplu lucru - să obținem textul paginii solicitate. Pentru aceasta, în acest obiect există metoda text. Această metodă, însă, nu returnează textul paginii, ci un promise cu textul acesteia:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // va afișa Promise
    }
  );
});

Pentru a ajunge la textul paginii, este necesar să procesăm promise-ul obținut din response.text, încă o dată:

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

Deci, am obținut în sfârșit textul paginii solicitate și putem, de exemplu, să îl scriem în div-ul nostru:

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