━目次━
jQueryでAjax通信を行う時書き方を意識していますか？
意外とネットで出てくるサンプルコードが古いバージョンの書き方のものが多いので、
何も知らずに古いバージョンの書き方で書いてしまっている人もいるかと思います。
(そして意外とバージョン毎の書き方をまとめているサイトも少ない…)
そこで今回はjQueryのバージョン毎に$.ajaxの書き方をまとめたいと思います。
因みにjQueryのバージョン毎のモジュールはマイクロソフトのこのページが見やすいです
jQuery Releases on the CDN
最新の書き方
【動作確認済】jQuery1.5以上(alwaysのみ1.6から)
以下２つの書き方は最新バージョンのjQuery(3.3.1)でも動作します。
done fail always を使うパターン
現在最もオーソドックスな書き方です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$.ajax({ url: "xxxxx", // URLを指定 type: "GET", // GET,POSTなどを指定 data: { // データを指定 param1 : "AAA", param2 : "BBB" } }).done(function (data) { // 通信成功時のコールバック処理 }).fail(function (data) { // 通信失敗時のコールバック処理 }).always(function (data) { // 常に実行する処理 }); |
$.ajax内で要件に応じて各項目を設定し、
.doneファンクション内に成功時の処理
.failファンクション内に失敗時の処理
.alwaysファンクション内に常に実行する処理
を書いていきます。
※alwaysのみjQuery1.6～しか使えないので注意してください
個人的には「always」って表現が分かり易くて良いと思ってます。
thenを使うパターン
thenというちょっとナウい表現を使って書く方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$.ajax({ url: "xxxxx", // URLを指定 type: "GET", // GET,POSTなどを指定 data: { // データを指定 param1 : "AAA", param2 : "BBB" } }) .then( // 1つめは通信成功時のコールバック処理 function (data) { }, // 2つめは通信失敗時のコールバック処理 function () { }); |
ただこの書き方は『何個目のファンクションか』というので成功時と失敗時を書き分けるので、
1つ目のと違い直感的に分かり辛いという欠点があるのであまりオススメしません。
jQuery1.5～jQuery2.2.4の書き方
【動作確認済】jQuery1.5～2.2.4(2の最終バージョン)
最新の書き方が登場する前に一瞬登場した書き方です。
この書き方ですが、jQuery3以降は使えないので気を付けて下さい。
success error complete を使う
最新版の
・done
・fail
・always
をそれぞれ
・success
・error
・complete
に書き換えるだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$.ajax({ url: "xxxxx", // URLを指定 type: "GET", // GET,POSTなどを指定 data: { // データを指定 param1 : "AAA", param2 : "BBB" } }).success(function (data) { // 通信成功時のコールバック処理 }).error(function (data) { // 通信失敗時のコールバック処理 }).complete(function (data) { // 常に実行する処理 }); |
最新版と書き方も同じですし、最新版も1.5で動くので
この書き方を使うメリットはほぼ無いと言えるでしょう。
唯一、jQuery1.5を使っていて尚且つcomplete処理を書いている場合はこの書き方にしないといけませんが…
それ以前の書き方
【動作確認済】～3.3.1(最新バージョン)
jQuery1.5でajaxの書き方に関して大幅な刷新がありましたが、それ以前は以下の書き方でした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$.ajax({ url: "xxxxx", // URLを指定 type: "GET", // GET,POSTなどを指定 data: { // データを指定 param1 : "AAA", param2 : "BBB" } success: function(data){ // 通信成功時のコールバック処理 }, error: function(){ // 通信失敗時のコールバック処理 } }); |
いわゆるコールバック(※)地獄になる書き方ですね。
(※)成功時の処理をネストした中に書いていかないといけないので、その後さらにAjax…とどんどんネストが深くなり、可読性が著しく低下すること
正直まだこの書き方しているコードが依然として多いと思います。
ネットでもこの書き方で紹介している記事がまだ上位にきたりしちゃってますし…
更に、良いのか悪いのか、この書き方であれば
最新版のバージョンのjQueryでも正常に動く
というね…
まぁいずれ動かなくなるでしょうし、最新の書き方にしとくのが無難です。読みやすいですし。
さいごに
jQueryのAjax通信における
バージョン毎の書き方
動作するバージョン
注意点
についてご紹介しました。
モダンなJSのライブラリやフレームワークが伸びてきていると言えども、現実問題まだまだjQueryは現役でしょうからね。
あーReactやりたいぃ
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
