AJAX-те fetch жұмысының негіздері

Енді беттің бір бөлігін AJAX көмегімен қалай жүктеуге болатынын қарастырайық. Біздің index.html бетінде див және батырма болсын (мұнда body мазмұны көрсетілген):

public/index.html<div></div>
<button>click me</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 нәтиже ретінде промис қайтарады. Себебі, 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 әдісі бар. Бірақ бұл әдіс бет мәтінін емес, ол мәтінмен промис қайтарады:

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;
    }
  );
});