Odosielanie GET požiadaviek cez AJAX v JavaScripte

Poďme sa teraz naučiť prenášať dáta na server v AJAX požiadavke. Server s týmito dátami niečo urobí a odošle nám späť výsledok.

Náš testovací server bude spracovávať dáta odoslané na adresu /handler/:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/');
});

Na začiatok pošleme GET požiadavku:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/?num=3');
});

Poďme získať odoslané dáta na strane servera:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // vypíše 3
  }
}

Poďme s týmito dátami niečo urobiť a poslať ich späť:

server.jsexport default {
  '/handler/': function({get}) {
    return get.num ** 2;
  }
}

Na strane klienta získame výsledok a vypíšeme ho niekam:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/handler/?num=3').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text);
    }
  );
});
Задание 1

Na klientovi je daný div a tlačidlo. Po kliknutí na tlačidlo odošlite na server dve čísla. Nech server nájde súčet odoslaných čísel. Výsledok zapíšte do divu.

Задание 2

Nech je na serveri dané pole. Nech server očakáva, že parametrom bude odoslané číslo, a vráti prvok poľa zodpovedajúci tomuto číslu. Po kliknutí na tlačidlo odošlite na server nejaké číslo a odpoveď servera vypíšte do odseku.