Darba ar fetch pamati AJAX

Tagad apskatīsim, kā ielādēt daļu lapas, izmantojot AJAX. Pieņemsim, ka mūsu lapā index.html atrodas div un poga (šeit parādīts body saturs):

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

Pieņemsim, ka mums ir arī lapa ajax.html, kurā atrodas trīs rindkopas (bez lapas tagiem, tikai rindkopas):

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

Izveidosim tā, lai, noklikšķinot uz pogas lapā index.html, div tiek ielādēts lapas ajax.html saturs.

Lai to izdarītu, vispirms iegūstam mainīgajos atsauces uz mūsu elementiem:

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

Pievienosim pogai klikšķa notikumu apstrādi:

public/client.jsbutton.addEventListener('click', function() {
  // šeit veiksim AJAX pieprasījumu
});

Tagad veiksim AJAX pieprasījumu. Šim nolūkam tiek izmantota funkcija fetch, kuras parametrā ir lapas adrese, kuras saturu mēs vēlamies iegūt. Norādīsim lapas adresi ajax.html uz mūsu servera:

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

fetch atgriezīs kā rezultātu promisu. Lieta tāda, ka lapas pieprasījums, izmantojot AJAX, - ir asinhrona operācija, jo paiet zināms laiks, pēc kura lapa mums atbildēs.

Iegūsim promisa rezultātu:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // servera atbilde atrodas mainīgajā response
  });
});

Vienkāršosim, atbrīvojoties no liekā mainīgā:

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

Vienkāršosim, izmantojot bulta funkciju:

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

Attēlosim lasāmākā veidā:

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

Mainīgajā response atrodas pietiekami sarežģīts klases Response objekts:

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

Šo objektu mēs dziļi pētīsim nākamajās nodarbībās, bet pagaidām mums vajag visvienkāršāko - iegūt pieprasītās lapas tekstu. Šim nolūkam šajā objektā pastāv metode text. Šī metode tomēr atgriež nevis lapas tekstu, bet promisu ar tās tekstu:

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

Lai iegūtu lapas tekstu, nepieciešams promisu, kas iegūts no response.text, apstrādāt vēlreiz:

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

Tātad, mēs beidzot esam saņēmuši pieprasītās lapas tekstu un varam, piemēram, ierakstīt to mūsu div:

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