jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery による Ajax > Deferred による Ajax - 新しいメソッドの利用

Deferred による Ajax - 新しいメソッドの利用

Ajax は最近は XMLHTTP オブジェクトを利用した非同期メソッド呼出しの総称として使われています。

jQuery 1.8 から Ajax は Deferred オブジェクトを利用して、実装されるように変わり、それに伴って従来 (それ以前) の非同期コールバックメソッドである success, error, complete は deprecated というステータスになりました。

jQuery のリファレンスにも今後 deprecated のコードが削除される可能性があるので、利用しないよう注意書きが追記されました。

ここでは、新しいメソッドの呼び出し例を記載します。

ajax で使う新しいメソッド done, fail, always

ここで ajax-test.php は次の通り。

<!DOCTYPE html>
<html>
<head>
<script 
 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src='ajax-test.js'></script>
</head>
<body>
<p><button id='button1'>Test 1</button></p>
</body>
</html>

ここで取り込む ajax-test.js は次の通り。

$(document).ready(function(event){
  $('#button1').click(function(event){
    
    var data1 = 'This data was sent from a client!';
    
    $.ajax({
      url: 'ajax-test-handler.php',
      type: 'POST',
      cache: false,
      dataType: 'json',
      data: {
        d1 : data1
      }
    })
    .done(function( data, textStatus, jqXHR ) {
      alert('x=['+data.x+'] y=['+data.y +'] z=['+data.z+']');
    })
    .fail(function( jqXHR, textStatus, errorThrown ){
      alert('fail!');
    })      
    .always(function( data, textStatus, errorThrown ){
      alert('always!');
    });
    
  });
});

Ajax のサーバー側のハンドラは PHP を用いて次のようにしました。(ajax-test-handler.php)

<?php
  $a = array(
    'x' => 'Hello',
    'y' => 'World!',
    'z' => $_POST['d1']
  );
  
  echo json_encode($a); 
?>

これを実行すると、次のようになりました。

HTML のボタンが表示され・・・

これをクリックすると、次のポップアップが表示されました。

これは done メソッドがよばれた結果ですね。また、z アトリビュートにクライアントからサーバーに送ったデータがセットされていることがわかります。

そして、続いて always が呼ばれます。

今回の変更で Deferred オブジェクトによるメソッドチェーンが利用できる利点があります。

従来のコードを新しく書き換える際は、success を done に、error を fail に、complete を always に書き換える形になるので、 素直に移行できるはずです。

ホーム > jQuery による Ajax > Deferred による Ajax - 新しいメソッドの利用
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門