Sending GET requests via AJAX in JavaScript

Let's now learn how to send data to a server in an AJAX request. The server will do something with this data and send back the result to us.

Our test server will process data sent to /handler/:

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

First, let's send a GET request:

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

Let's get the sent data on the server side:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // shows 3
  }
}

Let's do something with this data and send it back:

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

On the client side, we get the result and output it somewhere:

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