AJAX-ում fetch-ի հետ աշխատանքի հիմունքներ

Հիմա եկեք նայենք, թե ինչպես կարելի է էջի մի մասը բեռնել օգտագործելով AJAX: Ենթադրենք, որ մեր index.html էջի վրա տեղադրված է div և կոճակ (այստեղ ցուցադրված է 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 էջի կոճակի վրա կտտացնելիս 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;
    }
  );
});