Bazat e punës me fetch në AJAX

Le të shohim tani se si të ngarkojmë pjesë të një faqeje me ndihmën e AJAX. Le të supozojmë se në faqen tonë index.html do të ketë një div dhe një buton (këtu tregohet përmbajtja e body):

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

Le të supozojmë gjithashtu se kemi faqen ajax.html, ku janë vendosur tre paragrafë (pa etiketat e faqes, thjesht paragrafë):

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

Le të bëjmë që me klikim në buton në faqen index.html në div të ngarkohet përmbajtja e faqes ajax.html.

Për këtë, së pari le t'i marrim në variabla referencat për elementët tanë:

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

Le të vendosim në buton një përgjigjës të klikimit:

public/client.jsbutton.addEventListener('click', function() {
  // këtu do të kryejmë kërkesën AJAX
});

Le të kryejmë tani kërkesën AJAX. Për këtë përdoret funksioni fetch, që merr si parametër adresën e faqes, përmbajtjen e së cilës duam të marrim. Le të tregojmë adresën e faqes ajax.html në serverin tonë:

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

Si rezultat, fetch do të kthejë një promise. Çështja është se kërkesa e një faqeje përmes AJAX - është një operacion asinkron, sepse do të kalojë një kohë, pas së cilës faqja do të na përgjigjet.

Le të marrim rezultatin e promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // përgjigjja e serverit qëndron në variablin response
  });
});

Le të thjeshtësojmë, duke hequr variablin e tepërt:

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

Le të thjeshtësojmë, duke përdorur funksionin shigjetor:

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

Le ta paraqesim në një formë më të lexueshme:

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

Në variablin response përmban një objekt mjaft kompleks të klasës Response:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // objekt i klasës Response
  });
});

Këtë objekt do ta studiojmë thellësisht në mësimet në vijim, por tani për tani na duhet gjëja më e thjeshtë - të marrim tekstin e faqes së kërkuar. Për këtë në këtë objekt ekziston metoda text. Kjo metodë, megjithatë, nuk kthen tekstin e faqes, por një promise me tekstin e saj:

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

Për të arritur tek teksti i faqes, është e nevojshme që promise, i marrë nga response.text, të përpunohet edhe një herë:

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

Pra, më në fund kemi marrë tekstin e faqes së kërkuar dhe mund, për shembull, ta shkruajmë atë në div-in tonë:

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