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

では、AJAXリクエストでサーバーにデータを送信する方法を学びましょう。サーバーはこのデータに対して何らかの処理を行い、結果を私たちに返送します。

私たちのテストサーバーは、アドレス /handler/ に送信されたデータを処理します：

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

まず、GETリクエストを送信してみましょう：

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

サーバー側で送信されたデータを取得してみましょう：

export default {
	'/handler/': function({get}) {
		console.log(get.num); // 3を出力
	}
}

このデータに対して何か処理を行い、それを返送してみましょう：

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

クライアント側で結果を取得し、どこかに出力しましょう：

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

クライアントにはdivとボタンがあります。ボタンがクリックされたら、サーバーに2つの数値を送信してください。サーバーに送信された数値の合計を求めさせます。結果をdivに書き込んでください。

サーバーに配列があるとします。サーバーは、数値がパラメータとして渡されることを期待し、その数値に対応する配列の要素を返します。ボタンがクリックされたらサーバーに数値を送信し、サーバーの応答を段落に出力してください。