【jQuery】$.ajax()でAPI通信する基本（fetchとの違いも解説）

こんにちは、かつコーチです。

「サーバーからデータを取ってきて画面に表示したい」という場面は、業務でも学習でもよく出てきます。

jQueryには、そんな非同期通信（ページを再読み込みせずにサーバーとデータをやり取りする仕組み）を簡単に扱える$.ajax()というメソッドがあります。

この記事では、$.ajax()の基本構文からsuccess・error・completeコールバックの使い方、そして最近主流のfetch APIとの違いまで、中級者向けに整理して解説します。

読み終わる頃には、既存のjQuery案件でAjax通信部分を読み書きできるようになります。

$.ajax()の基本の書き方

基本構文

$.ajax()は、サーバーへHTTPリクエストを送り、結果を受け取るためのjQueryのメソッドです。

もっともシンプルな形は以下の通りです。

$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json'
})
  .done(function(data) {
    console.log('取得成功', data);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('取得失敗', textStatus);
  });

dataTypeとは、サーバーから返ってくるデータの形式をあらかじめ指定するオプションです。

jsonを指定すると、レスポンスを自動的にJavaScriptのオブジェクトに変換してくれます。

success・error・completeコールバック

$.ajax()には、.done()とは別に、オプションの中に直接書ける古い書き方もあります。

$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('取得成功', data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('取得失敗', textStatus);
  },
  complete: function() {
    console.log('通信が完了しました（成功・失敗どちらでも呼ばれる）');
  }
});

successは通信が成功したときに呼ばれるコールバックです。

errorは通信が失敗したとき（ステータスコードが400番台・500番台など）に呼ばれます。

completeは成功・失敗にかかわらず、通信が終わったタイミングで必ず呼ばれます。

ローディング表示を消す処理など、成否に関係なく実行したい処理はcompleteに書くと便利です。

$('#loading').show();

$.ajax({
  url: '/api/users',
  dataType: 'json',
  success: function(data) {
    $('#result').text(JSON.stringify(data));
  },
  error: function() {
    $('#result').text('取得に失敗しました');
  },
  complete: function() {
    $('#loading').hide();
  }
});

POST送信でデータを送る

データを送信する場合は、methodをPOSTにしてdataオプションを追加します。

$.ajax({
  url: '/api/users',
  method: 'POST',
  data: {
    name: 'かつコーチ',
    email: 'katsu@example.com'
  },
  dataType: 'json',
  success: function(response) {
    console.log('登録完了', response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('登録失敗', jqXHR.status, textStatus);
  }
});

つまずきやすい設定・注意点として、dataオブジェクトはデフォルトでapplication/x-www-form-urlencoded形式に自動変換されます。

JSON形式で送りたい場合は、contentType: 'application/json'とdata: JSON.stringify(...)を組み合わせる必要があるので、サーバー側の受け取り仕様と合わせて確認してください。

よくあるつまずきポイント・エラー対処

successコールバックが非推奨扱いになっている

jQuery 3系以降、success・error・completeオプションは非推奨（deprecated、将来のバージョンで廃止予定という意味）扱いです。

❌ Before（古い書き方のまま量産してしまった例）

$.ajax({
  url: '/api/users',
  success: function(data) {
    // Deprecation Notice: jQuery.ajax() success option
    // という警告がコンソールに出ることがある
  }
});

私が保守案件でこのコードを触ったとき、コンソールに警告が出ているのに気づかず、そのまま新しい処理を追加してしまったことがあります。

後で$.ajax()のバージョンアップ対応をする際に、.done()・.fail()形式のコードとsuccess形式のコードが混在していて、どこを直せばいいのか把握するのに時間がかかりました。

✅ After（Promiseスタイルに統一した書き方）

$.ajax({
  url: '/api/users',
  dataType: 'json'
})
  .done(function(data) {
    console.log('取得成功', data);
  })
  .fail(function(jqXHR, textStatus) {
    console.error('取得失敗', textStatus);
  })
  .always(function() {
    console.log('通信完了');
  });

$.ajax()はDeferredオブジェクト（Promiseに似た、非同期処理の結果を扱う仕組み）を返すため、.done()・.fail()・.always()をチェーンでつなげる書き方に統一するのがおすすめです。

新規でコードを書くときは、こちらの形式を使うようにしましょう。

エラー時にjqXHRの中身を確認せずハマる

通信エラーが起きたとき、errorThrownだけを見て原因を特定しようとすると情報が足りないことがあります。

❌ Before（エラー内容が分からないまま終わる）

$.ajax({
  url: '/api/users/999',
  error: function(jqXHR, textStatus, errorThrown) {
    console.error(errorThrown);
    // "Not Found" としか表示されず、原因が分からない
  }
});

✅ After（jqXHRのステータスとレスポンス本文を確認する）

$.ajax({
  url: '/api/users/999',
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('ステータスコード:', jqXHR.status);
    console.error('レスポンス本文:', jqXHR.responseText);
    console.error('エラー種別:', textStatus);
    // ステータスコード: 404
    // レスポンス本文: {"message":"User not found"}
  }
});

jqXHRとは、jQueryが返す拡張版のXMLHttpRequestオブジェクトで、ステータスコードやレスポンス本文などの詳細情報を持っています。

jqXHR.statusとjqXHR.responseTextを確認する癖をつけておくと、サーバー側が返したエラーメッセージまで読み取れるので、原因調査がぐっと速くなります。

$.ajax()とfetch APIの違い

比較表で見る主な違い

素のJavaScriptにも、非同期通信を行うfetch APIが標準搭載されています。

案件によってはjQuery自体を新規で入れず、fetchに置き換えるケースも増えているため、違いを整理しておきましょう。

項目	$.ajax()	fetch API
記法	コールバック / Deferred	Promise（async/awaitと相性が良い）
HTTPエラー時の挙動	4xx/5xxで自動的に.fail()が呼ばれる	4xx/5xxでもresolveされる（response.okを自分で確認する必要がある）
JSON変換	dataType: 'json'で自動変換	response.json()を明示的に呼ぶ必要がある
依存ライブラリ	jQuery本体が必要	ブラウザ標準機能なので不要
対応ブラウザ	jQueryが吸収するため古いブラウザでも動きやすい	モダンブラウザ中心（IE非対応）

fetchで書き直すとどうなるか

先ほどの取得処理をfetchで書くと、以下のようになります。

async function fetchUsers() {
  try {
    const response = await fetch('/api/users');

    if (!response.ok) {
      // fetchはHTTPエラーでもrejectされないため自分でチェックする
      throw new Error('HTTPエラー: ' + response.status);
    }

    const data = await response.json();
    console.log('取得成功', data);
  } catch (error) {
    console.error('取得失敗', error.message);
  }
}

fetchはresponse.okのチェックを忘れると、404や500が返ってきても「成功した」ように見えてしまう点が最大の落とし穴です。

$.ajax()はHTTPエラーを自動的に.fail()に振り分けてくれるため、この点では初心者にも扱いやすい設計になっています。

一方で、新規開発ではライブラリ依存を減らせるfetchが優勢という流れも押さえておきましょう。

応用・一歩先の使い方

既存のjQuery案件を保守しながら少しずつモダン化したい場合、$.ajax()をPromiseとして扱い、async/awaitと組み合わせることもできます。

async function loadUsers() {
  try {
    const data = await $.ajax({
      url: '/api/users',
      dataType: 'json'
    });
    console.log('取得成功', data);
  } catch (jqXHR) {
    console.error('取得失敗', jqXHR.status);
  }
}

$.ajax()が返すDeferredオブジェクトはawaitできるため、コールバックのネストを避けたい場面で有効です。

いきなりfetchへの全面書き換えが難しいレガシー案件でも、この書き方なら段階的に読みやすいコードへ移行できます。

まとめ

この記事のポイント

• $.ajax()はサーバーとの非同期通信を行うjQueryの中心的なメソッド
• success/error/completeオプションは非推奨のため、.done()・.fail()・.always()形式で書くのがおすすめ
• エラー時はjqXHR.status・jqXHR.responseTextを確認すると原因調査が早くなる
• fetch APIはHTTPエラーでもresolveされるため、response.okのチェックを忘れないこと

次に読むべき記事

• $.getJSON()で外部データを取得して表示する
• jQueryでよくあるエラーと解決法まとめ（$ is not defined等）
• jQueryと素のJavaScript、2026年どちらを選ぶべきか徹底比較

タグ: jQuery, 中級者向け, API連携