【コーダー必見！】jQueryでAJAX通信を行う際のナウでヤングな書き方

Web2017年5月24日

jQueryを使ってAJAX通信を行ったスクリプトを書く場合、昔はsuccessとerrorを使って「成功したとき～」「失敗したとき～」というような書き方をしていましたが、jQuery1.8以降ではthen()を使って書くとスマートです。本記事ではthen()メソッドを使ったAJAX通信のスクリプトをご紹介させていただきたいと思います。

一昔前の書き方

2017年5月現在、未だに検索するとこのあたりのサンプルコードが見つかるかと思います。

$.ajax({
    url: "./xml/data.xml",
    success: function (data) {
        alert("読み込み成功しました");
    },
    error: function () {
        alert("読み込み失敗しました");
    }
});

上記はjQuery1.4以前の書き方

昔は上記のような書き方が主流でした。このコードは新しいjQueryでも動作するのですが、成功時にさらにAJAX通信を行ったりなど複雑なスクリプトになればなるほどバグを抱えるリスクも高まるため、できればもうこの書き方は忘れてしまったほうが良いでしょう。

jQuery1.8以降のナウでヤングな書き方

then()メソッドを使う事で同じ処理を行うことが可能です。

$.ajax({
    url: "./xml/data.xml"
})
.then(

    /*読み込み成功時*/
    function (data) {
        alert("読み込み成功しました");
    },
    
    /*読み込み失敗時*/
    function () {
        alert("読み込み失敗しました");
});

1つめの関数が成功時、2つめの関数が失敗時の処理となります。整理されてスッキリとしたスクリプトになりました。

まとめ

jQuery自体は10年以上前からフロントエンド・エンジニアに愛用されているライブラリですが、こうやってモダンな書き方は時代と共に変わっていきます。取り残されないよう、こういったところにも日々注意していきたいところですね。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。