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 саҳифасининг контенти дивга юклансин.

Буни амалга ошириш учun аввало элементларимизга ҳаволаларни ўзгартувчиларга оламиз:

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