AJAX-da fetch bilen işlemegiň esaslary

Indi bolsa, bir sahypanyň bir bölegini AJAX arkaly nädip ýüklemek mümkinçiligine serediň. Sahypamyzda index.html bir div we bir düwmýanyň ýerleşdirilen bolsun (bu ýerde body-iň mazmuny görkezilýär):

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

Bizde ajax.html sahypasy hem bolsun, onda üç abzas (sahypa tegleri bolmaz, diňe abzaslar) ýerleşdirilen:

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

Geliň, index.html sahypasyndaky düwmýä basylanynda, ajax.html sahypasynyň mazmuny div-e ýüklenýändigi ýaly edeliň.

Bunun üçin, ilki bilen elementlerimize salgylary üýtgeýjänlere alyň:

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

Geliň düwmýä basylyş işleýjisini baglaýalyň:

public/client.jsbutton.addEventListener('click', function() {
  // bu ýerde AJAX haýyşyny ýerine ýetireris
});

Indi bolsa AJAX haýyşyny ýerine ýetireýliň. Bunun üçin fetch funksiýasy ulanylýar, aljak mazmuny sahypanyň salgysyny parametr hökmünde alýar. Serwerimizdeki ajax.html sahypasynyň salgysyny görkezeliň:

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

fetch öz netijesi hökmünde promise gaýtarar. Sebäbi AJAX arkaly sahypa haýyş etmek - bu asinkron amal, sebäbi sahypanyň bize jogap bermegi üçin käbir wagt geçer.

Geliň promisiň netijesini alalyň:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // serweriň jogaby 'response' üýtgeýjäninde ýatýar
  });
});

Gereksiz üýtgeýjäni aýryp, ýönekeýleşdireýliň:

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

Ok funksiýasyny ulanyp, ýönekeýleşdireýliň:

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

Has okap bolýan görnüşde ýerine ýetireýliň:

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

response üýtgeýjäninde Response klasynyň ýeterlik derejede çylşyrymly obýekti bar:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // Response klasynyň obýekti
  });
});

Bu obýekti gowrak indiki sapaklarda öwreneris, ýöne häzirki wagtda bize iň ýönekeýi - haýyş edilen sahypanyň tekstini almak gerek. Bunuň üçin bu obýektde text metody bar. Emma bu metod sahypanyň tekstini däl-de, onuň teksti bilen promisi gaýtarýar:

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

Sahypanyň teksti ýetmek üçin, response.text-den alynan promisi ýene bir gezek işlemek gerek:

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

Şeýlelik bilen, ahyrsoňy haýyş edilen sahypanyň tekstini aldyk we, meselem, ony div-imize ýazyp bileris:

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