シンプルで強力な AJAX 呼び出し：fetch() API と Axios ライブラリ

2024-04-11

jQuery なしで AJAX 呼び出しを行う方法

jQuery は JavaScript ライブラリであり、AJAX 呼び出しを含む多くのタスクを簡略化できます。しかし、ライブラリの追加は不要なオーバーヘッドとなる場合があり、jQuery なしで直接 AJAX を行うことも可能です。

方法

XMLHttpRequest オブジェクトを作成

const xhr = new XMLHttpRequest();

リクエストを開く

xhr.open('GET', 'https://example.com/api/data');

リクエストヘッダーを設定 (オプション)

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.send();

レスポンスを処理

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // データ処理
  } else {
    // エラー処理
  }
};

詳細

XMLHttpRequest オブジェクトは、ブラウザとサーバー間の通信を処理します。
open() メソッドは、リクエストの種類と URL を指定します。
setRequestHeader() メソッドは、リクエストヘッダーを設定します。
send() メソッドは、リクエストを送信します。
onload イベントは、リクエストが完了したときに発生します。
status プロパティは、リクエストのステータスコードを返します。
responseText プロパティは、レスポンスのテキスト内容を返します。

fetch() API: より新しい API で、Promise ベースで記述できます。
Axios: Promise ベースの AJAX ライブラリで、エラー処理などが簡潔に記述できます。

注意事項

クロスドメインリクエストを行う場合は、CORS 設定が必要となります。
エラー処理を適切に行う必要があります。

補足

jQuery なしで AJAX 呼び出しを行うことは、ライブラリの依存関係を減らし、コードを軽量化したい場合に有効です。しかし、jQuery を使用すれば、コードをより簡潔に記述できます。プロジェクトの要件に合わせて、適切な方法を選択してください。

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data');

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data); // データ処理
  } else {
    console.error('エラーが発生しました:', xhr.status); // エラー処理
  }
};

xhr.send();

このコードは、以下の点を変更することで、さまざまな AJAX 呼び出しを行うことができます。

open() メソッドの第 1 引数で、リクエストの種類を変更できます。
onload イベントハンドラで、レスポンスデータの処理内容を変更できます。

jQuery 以外で AJAX 呼び出しを行う方法

fetch() API は、ブラウザの標準機能として提供されている新しい API です。Promise ベースで記述でき、コードをより簡潔に記述できます。

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // データ処理
  })
  .catch(error => {
    console.error('エラーが発生しました:', error); // エラー処理
  });

Axios ライブラリ

axios.get('https://example.com/api/data')
  .then(response => {
    console.log(response.data); // データ処理
  })
  .catch(error => {
    console.error('エラーが発生しました:', error); // エラー処理
  });

その他のライブラリ

上記以外にも、さまざまな AJAX ライブラリが提供されています。それぞれの特徴を比較して、プロジェクトに合ったライブラリを選択してください。

jQuery は、多くの機能を持つ便利なライブラリですが、必ずしも必要ではありません。プロジェクトの要件に合わせて、適切な方法を選択してください。

javascript ajax