背景
業務(WordPressのカスタム投稿データを固定ページごとに非同期で取得して表示する)の中で、非同期通信でデータを取得する処理がありました。最近では、Fetchという技術が使われているみたいですが、少し前まではXMLHttpRequestを使用している記事が多く見受けられます。
僕の中で、Ajax通信技術の中のFetchを使うやり方がある。みたいな変な勘違いをしていましたので、改めて学び直しでAjaxとFetchの違いについて書きます。
非同期通信について
Ajaxとは...
Asynchronous JavaScript And XMLの略語として、「非同期処理のJavaScriptとXML」を意味しており、JavaScriptを使ってブラウザ上でサーバーと非同期通信(Async通信)を行う技術のこと
- ページの一部更新
- ページ全体を更新（再読込）することなく、データの送受信が可能
- XMLHttpRequestオブジェクトを使用
XMLHttpRequestオブジェクトを使ってHTTPリクエストを生成・送信し、サーバーからデータを取得してウェブページを更新する、という仕組み
Fetchとは...
JavaScriptでウェブサーバーと通信を行うためのインターフェース
- プロミスベースの設計になっているため、非同期処理が扱いやすい
- XHRよりコードがシンプルに記述できる
- JSONデータのパースが簡単
- クロスオリジンリクエストがデフォルトで有効化
AjaxとFetchの基本的なコード
script.js
// Ajaxのコード
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = function() {
// レスポンス処理
console.log(xhr.responseText);
};
xhr.onerror = function() {
// エラーハンドリング
console.log('エラーが発生しました');
};
xhr.send();
// Fetchのプロミスチェーンのコード
fetch(url, options)
.then(response => {
// レスポンス処理
return response.text();
})
.catch(error => {
// エラーハンドリング
console.log('エラーが発生しました');
});
非同期通信の際はどちらを使用するとよい？
4つの観点から考える
-
使用するオブジェクト
- Fetch：fetch()関数
- AJAX：XMLHttpRequestオブジェクト
-
コーディングスタイル
- Fetch：プロミスベースでシンプル
- AJAX：コールバック関数が複雑にネストする場合がある
-
クロスオリジンリクエストの扱い方
- Fetch：デフォルトでCORSに対応
- AJAX：CORSを使うために特別な設定が必要
-
ブラウザへのサポート
- Fetch：IE11未満や古いブラウザでは未サポート
- AJAX：ほぼすべてのブラウザでサポート
古いブラウザでも閲覧の可能性がある場合や、XMLHttpRequestの細かいカスタマイズもやりたい場合は、AJAXを使用する方がよさそう。
AJAXでは、通信中のプログレスイベントも使えるらしい。