GET հարցումների ուղարկում AJAX-ի միջոցով JavaScript-ում

Եկեք հիմա սովորենք տվյալներ փոխանցել սերվերին AJAX հարցման միջոցով: Սերվերը ինչ-որ բան կանի այդ տվյալների հետ և կուղարկի մեզ հետ արդյունքը:

Մեր փորձնական սերվերը կմշակի տվյալները, որոնք ուղարկված են հասցեին /handler/:

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

Սկսենք՝ ուղարկենք GET հարցում:

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

Եկեք ստանանք ուղարկված տվյալները սերվերի կողմում:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // կարտածի 3
  }
}

Եկեք ինչ-որ բան անենք այդ տվյալների հետ և ուղարկենք դրանք ետ:

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

Կլիենտի կողմում կստանանք արդյունքը և կարտածենք այն ինչ-որ տեղ:

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

Կլիենտում տրված է div և կոճակ: Կոճակի վրա սեղմելով ուղարկեք սերվեր երկու թիվ: Թող սերվերը գտնի փոխանցված թվերի գումարը: Արդյունքը գրեք div-ում:

Задание 2

Թող սերվերում տրված լինի զանգված: Թող սերվերը սպասի, որ պարամետրով կփոխանցվի թիվ, և վերադարձնի զանգվածի տարրը, որ համապատասխանում է այդ թվին: Կոճակի վրա սեղմելով ուղարկեք սերվեր որոշակի թիվ, իսկ սերվերի պատասխանը արտածեք պարբերության մեջ: