☰

jQuery.ajax は継続応答を処理します: 「success:」と「.done」の違いは? 質問する

tag-icon • tag-icon ajax jquery
jQuery.ajax は継続応答を処理します: 「success:」と「.done」の違いは? 質問する

私はここ数週間、jQuery と AJAX を使って作業してきましたが、呼び出しが行われた後、スクリプトを「続行」する 2 つの異なる方法を見つけました:success:と です.done。

あらすじからjQuery ドキュメント我々が得る：

.done(): 説明: Deferred オブジェクトが解決されたときに呼び出されるハンドラーを追加します。

success: (.ajax() オプション): リクエストが成功した場合に呼び出される関数。

つまり、どちらも AJAX 呼び出しが完了/解決された後に何かを実行します。どちらか一方をランダムに使用できますか? 違いは何ですか? また、どちらが代わりに使用されるのですか?

ベストアンサー1

successは、jQuery の成功コールバックの従来の名前であり、ajax 呼び出しのオプションとして定義されています。ただし、 の実装$.Deferredsとより洗練されたコールバックにより、done任意の で呼び出すことができるため、 が成功コールバックを実装するための推奨される方法ですdeferred。

たとえば、成功の場合:

$.ajax({
  url: '/',
  success: function(data) {}
});

たとえば、次のようにします。

$.ajax({url: '/'}).done(function(data) {});

の優れた点はdone、 の戻り値が$.ajax、アプリケーションの他の場所にバインドできる遅延 Promise になったことです。この Ajax 呼び出しをいくつかの異なる場所から実行したいとします。この Ajax 呼び出しを行う関数にオプションとして成功関数を渡すのではなく、関数$.ajax自体を返して、コールバックを、done、などにバインドすることができます。は、リクエストが成功しても失敗しても実行されるコールバックであることに注意してください。 は、成功した場合にのみトリガーされます。failthenalwaysdone

例えば：

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: showLoadingImgFn
  })
  .always(function() {
    // remove loading image maybe
  })
  .fail(function() {
    // handle request failures
  });

}

xhr_get('/index').done(function(data) {
  // do stuff with index data
});

xhr_get('/id').done(function(data) {
  // do stuff with id data
});

保守性の観点から、これの重要な利点は、Ajax メカニズムをアプリケーション固有の関数にラップしていることです。$.ajax将来的に呼び出しを別の方法で動作させる必要があると判断した場合、または別の Ajax メソッドを使用する場合、または jQuery から移行する場合は、定義を変更するだけで済みますxhr_get(上記の例の場合、Promise または少なくともメソッドを返すようにしてくださいdone)。アプリ全体のその他の参照はすべて同じままにできます。

を使って実行できる (もっとクールな) ことは他にもたくさんあります$.Deferred。その 1 つは、リクエスト自体は成功したpipe場合でも、サーバーによって報告されたエラーで失敗をトリガーするためにを使用することです$.ajax。例:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .pipe(function(data) {
    return data.responseCode != 200 ?
      $.Deferred().reject( data ) :
      data;
  })
  .fail(function(data) {
    if ( data.responseCode )
      console.log( data.responseCode );
  });
}

xhr_get('/index').done(function(data) {
  // will not run if json returned from ajax has responseCode other than 200
});

詳細は$.Deferredこちらをご覧ください:http://api.jquery.com/category/deferred-object/

注意: jQuery 1.8 以降では、まったく同じ方法でpipe使用することを推奨しなくなりました。then

おすすめ記事