おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶）

jQueryでAjaxを使う時、こんな書き方していませんか？

昔の$.ajax()

$.ajax({
	url: "http://jsrun.it/assets/E/H/Z/t/EHZt3",
	success: function (data) {
		$("#results").append(data);
	},
	error: function () {
		alert("読み込み失敗");
	}
});
// urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。

• jsdo.itで実行する

これはInternet Explorer 6(故)が猛威を振るっていた時代の、jQuery1.4くらいの旧い書き方です。「成功したらさらに非同期通信をしたい」「失敗したら別の処理をしたい」等、他の処理が多くなるに連れてコールバック地獄に陥り、バグの温床となります。

もう辞めましょう。。。

#イマドキの$.ajax()はこう書く

イマドキは、jQueryのDeferredオブジェクトのthen()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。複雑なコールバック地獄から解消され、すっきりと見通しのよいコードを記述できます。ECMAScript 2015のPromiseそのものとは違い、IEでも動作します。

then()の使い方は下記です。

$.ajax()のイマドキの書き方

$.ajax({
		オプション
	})
	.then(成功時の処理, 失敗時の処理);

では、冒頭のコードをthen()を使ったコードに書き換えてみましょう。

$.ajaxとthen()の実例

$.ajax({
	url: "http://jsrun.it/assets/E/H/Z/t/EHZt3"
})
.then(
	// 1つめは通信成功時のコールバック
	function (data) {
		$("#results").append(data);
	},
	// 2つめは通信失敗時のコールバック
	function () {
		alert("読み込み失敗");
});
// urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。

• jsdo.itで確認する

アロー関数でもっとイマドキに

上記のコードはECMAScript 2015のアロー関数を使って下記のように記述できます。

アロー関数でもっとイマドキに

$.ajax({
  url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3'
})
  .then(
    data => $('#results').append(data),
    error => alert('読み込み失敗')
  );

• jsdo.itで確認する

※ アロー関数はIE 11で非対応なので、必要に応じてTypeScriptやBabelで変換してください

• TypeScriptの環境構築方法 - ICS MEDIA
• Babelの環境構築方法 - ICS MEDIA

#新時代の$.ajax()を
比較的最近作られたWebコンテンツ等を見ても、いまだ古い$.ajax()の書き方をしているコードを見かけます。Promiseを使った見通しのよい幸せなコーディングをしましょう。