【jQuery】done()メソッドとは:Ajax通信後に処理を実行する

時計 2023.06.20 / 時計

【jQuery】done()メソッドとは:Ajax通信後に処理を実行する

記事ではjQueryにおける、非同期通信のAjaxで主に利用されるdone()メソッドについて詳しく解説していきます。

done()メソッドは非同期通信のAjax通信やアニメーションで利用されます。これから非同期通信をWebアプリケーションに実装する、という方はdone()メソッドについて理解を深めておきましょう。

Ajaxとは

Ajax(Asynchronous JavaScript + XML)とはJavaScriptとXMLを使用してWebサーバーと非同期通信を行う技術です。Ajaxを使うことでページの読み込み(ページ遷移)を行わず動的にページの一部をサーバーから受け取ったデータを元に更新することができます。

IT用語の確認

非同期通信とはコンピュータ間でデータの送信・受信のタイミングを合わさずに通信を行える通信方式。要求を出したコンピュータは、応答を待つことなく別の処理を行えます

Ajaxのメリットを使うことによるメリットは以下の通りです。

  • ページ全体の更新を行わずに、ページの一部のみを更新できる
  • Webサーバーとの通信中でもページ操作が可能
  • ページ読み込み(ページ遷移)がないため、画面が真っ白になることがない
  • 動的にサーバーから取得したデータをページに反映できる

Ajaxでサーバーとクライアントの間ではJSONによるデータのやり取りを行います。JSONとは、JavaScript Object Notationの略で、読み書きが簡単、軽量という特徴を持っています。

JSONについて詳しくは以下記事をご参照ください。

done()メソッドとは

done()メソッドはPromiseオブジェクトに連結して使用し、Promiseオブジェクトの状態が「Fulfilled」の場合にdone()メソッド内の処理を実行します。

つまり非同期通信Ajaxにdone()メソッドを連結して使い、Ajaxが成功した場合にdone()メソッド内の処理を実行するということです。

Promiseオブジェクトとは

PromiseオブジェクトとはjQuery(JavaScript)で非同期通信の成功や失敗といった結果を返すオブジェクトです。AjaxではこのPromiseオブジェクトを返すため、done()メソッドと共に使用されます。

Promiseオブジェクトには以下3つの状態があります。これらの状態を使って、非同期処理の成功・失敗によって処理を分けていきます。

Promiseの状態 説明
Pending 初期の状態。まだ非同期通信が終了していない
Fulfilled 非同期通信の成功
Rejected 非同期通信の失敗

done()メソッドの構文は以下の通りです。

done()の構文

Promise.done(function [, function])

done()メソッドはAjaxだけでなくアニメーションanimate()による非同期通信でも利用されます。

jQueryでAjaxを実装

jQueryでAjaxを実装する場合、done()メソッドを以下のように使用します。

$.ajax({
    url: 'URLを記入',
}).done(function(response) {
    // 非同期操通信の成功時の処理
    console.log(response);
});

done()メソッドで複数の関数を実行する場合は、関数と関数の間をコンマで区切ります。

$.ajax({
    url: 'URLを記入',
}).done(
    function(response) {
    // 非同期操通信の成功時の処理
        console.log(response);
    },
    function(response) {
        console.log(response);
    }
);

まとめ

本記事「【jQuery】done()メソッドとは:Ajax通信後に処理を実行する」はいかがでしたか。

現代のWebアプリケーションでは多くの場合でAjaxは使用されています。使いやすいWebアプリケーションを作るのであれば、Ajaxなどによる非同期通信は必ず抑えておきたい技術です。

ぜひdone()メソッドを理解して、便利なWebアプリケーション開発を進めてください。