• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります





jQueryでAjax通信を行う時書き方を意識していますか?

意外とネットで出てくるサンプルコードが古いバージョンの書き方のものが多いので、

何も知らずに古いバージョンの書き方で書いてしまっている人もいるかと思います。

(そして意外とバージョン毎の書き方をまとめているサイトも少ない…)

そこで今回はjQueryのバージョン毎に$.ajaxの書き方をまとめたいと思います。

因みにjQueryのバージョン毎のモジュールはマイクロソフトのこのページが見やすいです
 ⇒ jQuery Releases on the CDN

最新の書き方

【動作確認済】jQuery1.5以上(alwaysのみ1.6から)

以下2つの書き方は最新バージョンのjQuery(3.3.1)でも動作します。

done fail always を使うパターン

現在最もオーソドックスな書き方です。


$.ajax内で要件に応じて各項目を設定し、
・.doneファンクション内に成功時の処理
・.failファンクション内に失敗時の処理
・.alwaysファンクション内に常に実行する処理


を書いていきます。

※alwaysのみjQuery1.6~しか使えないので注意してください


個人的には「always」って表現が分かり易くて良いと思ってます。

thenを使うパターン

thenというちょっとナウい表現を使って書く方法です。



ただこの書き方は『何個目のファンクションか』というので成功時と失敗時を書き分けるので、

1つ目のと違い直感的に分かり辛いという欠点があるのであまりオススメしません。

jQuery1.5~jQuery2.2.4の書き方

【動作確認済】jQuery1.5~2.2.4(2の最終バージョン)

最新の書き方が登場する前に一瞬登場した書き方です。

この書き方ですが、jQuery3以降は使えないので気を付けて下さい。

success error complete を使う

最新版の
・done
・fail
・always

をそれぞれ
・success
・error
・complete


に書き換えるだけです。


最新版と書き方も同じですし、最新版も1.5で動くので

この書き方を使うメリットはほぼ無いと言えるでしょう。

唯一、jQuery1.5を使っていて尚且つcomplete処理を書いている場合はこの書き方にしないといけませんが…

それ以前の書き方

【動作確認済】~3.3.1(最新バージョン)

jQuery1.5でajaxの書き方に関して大幅な刷新がありましたが、それ以前は以下の書き方でした。


いわゆるコールバック(※)地獄になる書き方ですね。

(※)成功時の処理をネストした中に書いていかないといけないので、その後さらにAjax…とどんどんネストが深くなり、可読性が著しく低下すること

正直まだこの書き方しているコードが依然として多いと思います。

ネットでもこの書き方で紹介している記事がまだ上位にきたりしちゃってますし…

更に、良いのか悪いのか、この書き方であれば


最新版のバージョンのjQueryでも正常に動く


というね…

まぁいずれ動かなくなるでしょうし、最新の書き方にしとくのが無難です。読みやすいですし。

さいごに

jQueryのAjax通信における
・バージョン毎の書き方
・動作するバージョン
・注意点


についてご紹介しました。

モダンなJSのライブラリやフレームワークが伸びてきていると言えども、現実問題まだまだjQueryは現役でしょうからね。

あーReactやりたいぃ

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-