AJAXにおけるfetchの基礎

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

public/index.html<div></div>
<button>click me</button>

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

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

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

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

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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