jQuery Ajax通信：Deferredオブジェクトで非同期処理を詳細に制御

2024-04-02

jQueryでAjax通信の成功をチェックする方法

successハンドラーを使う

最も一般的な方法は、successハンドラーを使う方法です。successハンドラーは、通信が成功した場合にのみ実行されます。

$.ajax({
  url: 'ajax.php',
  type: 'post',
  data: {
    name: 'John Doe',
    email: '[email protected]'
  },
  success: function(data) {
    // 通信成功時の処理
    console.log('通信が成功しました');
    console.log(data);
  }
});

successハンドラーには、通信結果のデータが引数として渡されます。このデータを使って、後続処理を行うことができます。

statusCodeオプションを使うと、特定のステータスコードに対する処理を個別に設定することができます。

$.ajax({
  url: 'ajax.php',
  type: 'post',
  data: {
    name: 'John Doe',
    email: '[email protected]'
  },
  statusCode: {
    200: function(data) {
      // 通信成功時の処理
      console.log('通信が成功しました');
      console.log(data);
    },
    400: function(data) {
      // エラー処理
      console.log('通信が失敗しました');
      console.log(data);
    }
  }
});

上記の例では、ステータスコード200の場合と400の場合の処理を個別に設定しています。

jqXHRオブジェクトは、Ajax通信の状態を表すオブジェクトです。このオブジェクトを使って、通信の成功・失敗をチェックすることができます。

var jqXHR = $.ajax({
  url: 'ajax.php',
  type: 'post',
  data: {
    name: 'John Doe',
    email: '[email protected]'
  }
});

jqXHR.done(function(data) {
  // 通信成功時の処理
  console.log('通信が成功しました');
  console.log(data);
}).fail(function(data) {
  // エラー処理
  console.log('通信が失敗しました');
  console.log(data);
});

上記の例では、jqXHRオブジェクトのdone()メソッドとfail()メソッドを使って、通信の成功・失敗をチェックしています。

これらの方法を組み合わせて、状況に応じて適切な処理を行うことができます。

completeハンドラーは、通信が完了した後に必ず実行されます。通信が成功したか失敗したかに関係なく、処理を行う必要がある場合に便利です。
alwaysハンドラーは、successハンドラー、errorハンドラー、completeハンドラーのいずれかまたはすべてが実行された後に実行されます。通信の状態に関わらず、必ず処理を行う必要がある場合に便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Ajax サンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="submit-button">送信</button>
  <div id="result"></div>

  <script>
  $(function() {
    $('#submit-button').click(function() {
      var name = $('#name').val();
      var email = $('#email').val();

      $.ajax({
        url: 'ajax.php',
        type: 'post',
        data: {
          name: name,
          email: email
        },
        success: function(data) {
          // 通信成功時の処理
          $('#result').html('通信が成功しました');
          console.log(data);
        },
        error: function(data) {
          // エラー処理
          $('#result').html('通信が失敗しました');
          console.log(data);
        }
      });
    });
  });
  </script>
</body>
</html>

このコードは、以下の処理を行います。

ユーザーが「送信」ボタンをクリックすると、name入力欄とemail入力欄に入力された値を取得します。
取得した値をajax.phpに送信します。
ajax.phpから返送されたデータに基づいて、#result要素の内容を変更します。

このコードを参考に、自分の目的に合ったコードを作成してください。

ajax.phpの内容は、目的に合わせて変更する必要があります。
エラー処理は、状況に合わせて追加する必要があります。

jQueryでAjax通信の成功をチェックするその他の方法

$.get() / $.post() メソッドは、ajax() メソッドよりも簡潔に記述できます。

$.post('ajax.php', {
  name: 'John Doe',
  email: '[email protected]'
}, function(data) {
  // 通信成功時の処理
  console.log('通信が成功しました');
  console.log(data);
});

これらのメソッドは、successハンドラーを省略することができます。ただし、statusCodeオプションやjqXHRオブジェクトを使うことはできません。

Deferredオブジェクトを使うと、非同期処理をより詳細に制御することができます。

var deferred = $.ajax({
  url: 'ajax.php',
  type: 'post',
  data: {
    name: 'John Doe',
    email: '[email protected]'
  }
});

deferred.done(function(data) {
  // 通信成功時の処理
  console.log('通信が成功しました');
  console.log(data);
}).fail(function(data) {
  // エラー処理
  console.log('通信が失敗しました');
  console.log(data);
});