AJAXにおけるfetchの基礎

AJAXを使用してページの一部を動的に読み込む方法を見ていきましょう。ページindex.htmlにdiv要素とボタンを配置します（以下はbodyの内容です）：

<div></div>
<button>click me</button>

また、別のページajax.htmlがあり、そこには3つの段落（ページタグなし、単なる段落）が配置されているとします：

<p>1</p>
<p>2</p>
<p>3</p>

ボタンをクリックしたときに、ページindex.htmlのdivにページajax.htmlの内容が読み込まれるようにしましょう。

まず、要素への参照を変数に取得します：

let div    = document.querySelector('div');
let button = document.querySelector('button');

ボタンにクリックイベントリスナーを追加しましょう：

button.addEventListener('click', function() {
	// ここでAJAXリクエストを実行します
});

次にAJAXリクエストを実行します。これには、取得したいコンテンツのあるページのURLをパラメーターとして受け取る関数fetchを使用します。サーバー上のページajax.htmlのURLを指定しましょう：

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

fetchはプロミスを返します。AJAXによるページリクエストは非同期操作であるため、サーバーが応答するまでに一定の時間がかかるからです。

プロミスの結果を取得しましょう：

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// サーバーからの応答は変数responseに格納されています
	});
});

不要な変数を排除して簡略化します：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

アロー関数を使用してさらに簡略化します：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

より読みやすい形式で表します：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

変数responseには、クラスResponseのかなり複雑なオブジェクトが含まれています：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Responseクラスのオブジェクト
	});
});

このオブジェクトの詳細については次のレッスンで学びますが、今は最も単純なこと、つまりリクエストしたページのテキストを取得する必要があります。このオブジェクトにはそのためのメソッドtextが存在します。ただし、このメソッドはページのテキスト自体ではなく、そのテキストを持つプロミスを返します：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promiseを出力します
		}
	);
});

ページのテキストにアクセスするには、 response.textから取得したプロミスをさらに処理する必要があります：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // ページのテキスト
		}
	);
});

これで、ようやくリクエストしたページのテキストを取得できたので、例えばそれをdivに挿入することができます：

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

3つのボタンと1つのdivが与えられています。サーバー上に3つのページがあります。各ボタンがdivに対応するページを読み込むようにしてください。

サーバー上に5つのページがあるとします。ボタンを1回クリックすると1ページ目が読み込まれ、2回クリックすると2ページ目が読み込まれ、というように、ページがなくなるまで続くようにしてください。