AJAX-da fetch bilan ishlash asoslari

Keling, endi sahifaning bir qismini AJAX yordamida qanday yuklashni ko'rib chiqaylik. Faraz qilaylik, bizning index.html sahifamizda div va tugma joylashgan (bu yerda body tarkibi ko'rsatilgan):

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

Faraz qilaylik, bizda ajax.html sahifasi ham bor, unda uchta abzas joylashgan (sahifa teglarisiz, oddiy abzaslar):

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

Keling, index.html sahifasidagi tugma bosilganda div ichiga ajax.html sahifasi tarkibi yuklansin.

Buning uchun avvalo elementlarga havolalarni o'zgaruvchilarga olaylik:

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

Keling, tugmaga klik hodisasi qo'shaylik:

public/client.jsbutton.addEventListener('click', function() {
  // bu yerda AJAX so'rovni bajaramiz
});

Keling, endi AJAX so'rovni bajaraylik. Buning uchun fetch funktsiyasi ishlatiladi, uning parametri sifatida biz o'z tarkibini olishni xohlaydigan sahifa manzilini ko'rsatamiz. Serverimizdagi ajax.html sahifasi manzilini ko'rsatamiz:

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

fetch o'z natijasi sifatida promise ni qaytaradi. Gap shundaki, AJAX orqali sahifa so'rovi - bu asinxron operatsiya, chunki sahifa bizga javob berishiga bir muncha vaqt ketadi.

Keling, promise natijasini olamiz:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // server javobi response o'zgaruvchisida yotadi
  });
});

Keling, ortiqcha o'zgaruvchilardan foydalanmaslik uchun soddalashtiramiz:

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

Keling, strelochniy funktsiyadan foydalanib soddalashtiramiz:

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

Keling, ko'proq o'qiladigan ko'rinishda ifodalaylik:

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

response o'zgaruvchisida Response sinfining ancha murakkab obyekti mavjud:

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

Ushbu obyektni chuqurroq biz keyingi darslarda o'rganamiz, hozircha bizga eng oddiy narsa kerak - so'ralgan sahifa matnini olish. Buning uchun ushbu obyektda text metodi mavjud. Biroq, ushbu metod sahifa matnini emas, balki uning matni bilan promiseni qaytaradi:

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

Sahifa matniga etib borish uchun, response.text dan olingan promiseni yana bir marta qayta ishlash kerak:

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

Xo'sh, nihoyat biz so'ralgan sahifa matnini oldik va, masalan, uni divimizga yozishimiz mumkin:

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