JavaScriptでのAJAXを用いたGETリクエストの送信

では、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);
    }
  );
});