【jQuery】done()メソッドとは：Ajax通信後に処理を実行する
2023.06.20 /
本記事ではjQueryにおける、非同期通信のAjaxで主に利用されるdone()メソッドについて詳しく解説していきます。
done()メソッドは非同期通信のAjax通信やアニメーションで利用されます。これから非同期通信をWebアプリケーションに実装する、という方はdone()メソッドについて理解を深めておきましょう。
Ajaxとは
Ajax（Asynchronous JavaScript ＋ XML）とはJavaScriptとXMLを使用してWebサーバーと非同期通信を行う技術です。Ajaxを使うことでページの読み込み（ページ遷移）を行わず動的にページの一部をサーバーから受け取ったデータを元に更新することができます。
非同期通信とはコンピュータ間でデータの送信・受信のタイミングを合わさずに通信を行える通信方式。要求を出したコンピュータは、応答を待つことなく別の処理を行えます
Ajaxのメリットを使うことによるメリットは以下の通りです。
- ページ全体の更新を行わずに、ページの一部のみを更新できる
- Webサーバーとの通信中でもページ操作が可能
- ページ読み込み（ページ遷移）がないため、画面が真っ白になることがない
- 動的にサーバーから取得したデータをページに反映できる
Ajaxでサーバーとクライアントの間ではJSONによるデータのやり取りを行います。JSONとは、JavaScript Object Notationの略で、読み書きが簡単、軽量という特徴を持っています。
JSONについて詳しくは以下記事をご参照ください。
JSONとは？特徴や記述方法、利用される場面について
done()メソッドとは
done()メソッドはPromiseオブジェクトに連結して使用し、Promiseオブジェクトの状態が「Fulfilled」の場合にdone()メソッド内の処理を実行します。
つまり非同期通信Ajaxにdone()メソッドを連結して使い、Ajaxが成功した場合にdone()メソッド内の処理を実行するということです。
Promiseオブジェクトとは
PromiseオブジェクトとはjQuery（JavaScript）で非同期通信の成功や失敗といった結果を返すオブジェクトです。AjaxではこのPromiseオブジェクトを返すため、done()メソッドと共に使用されます。
Promiseオブジェクトには以下３つの状態があります。これらの状態を使って、非同期処理の成功・失敗によって処理を分けていきます。
| Promiseの状態 | 説明 |
|---|---|
| Pending | 初期の状態。まだ非同期通信が終了していない |
| Fulfilled | 非同期通信の成功 |
| Rejected | 非同期通信の失敗 |
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アプリケーション開発を進めてください。
関連記事
