fetch-ის მუშაობის საფუძვლები AJAX-ში

ახლა ვნახოთ, როგორ ჩავტვირთოთ გვერდის ნაწილი AJAX-ის საშუალებით. დავუშვათ, რომ ჩვენს გვერდზე index.html განთავსებულია div და ღილაკი (აქ ნაჩვენებია body-ის შიგთავსი):

public/index.html<div></div>
<button>დააკლიკე მე</button>

დავუშვათ, რომ ჩვენ ასევე გვაქვს გვერდი ajax.html, რომელზეც განთავსებულია სამი აბზაცი (გვერდის ტეგების გარეშე, უბრალოდ აბზაცები):

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

მოდით, გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას გვერდზე index.html div-ში ჩაიტვირთოს გვერდის 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); // გვერდის ტექსტი
    }
  );
});

ასე რომ, ჩვენ საბოლოოდ მივიღეთ მოთხოვნილი გვერდის ტექსტი და შეგვიძლია, მაგალითად, ჩავწეროთ იგი ჩვენს div-ში:

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