jQueryのバージョン毎によるAjaxの書き方まとめ

ajax

jQueryのバージョンが古いとAjaxの書き方もちょっと変わってきて、「あれ、ネットのやり方だと動かないな。。。」ということがたまにあると思います。

書き方は大きくは3種類ほどあって、いつも混乱してしまうので、今回はそれぞれのバージョンで動作する書き方をまとめてみました。

[スポンサーリンク]

jQuery1.6以上のAjax

こちら一番新しい書き方です。
jQuery3以上のバージョンでも動作します。

function() {
    var hostUrl= 'http://localhost:8080/api/v1/tickets/100';
    $.ajax({
        url: hostUrl,
        type:'GET',
        dataType: 'json',
        timeout:10000,
    }).done(function(data) {
        alert('success!! APIの結果は、' + data.id);
    }).fail(function(data) {
        alert('error!!!');
    }).always(function(data) {
        alert('complete!!!');
    });
};

dataTypeについて

今回はAjaxでコールする先はクロスドメインではないということを想定しています。

なので、今回のdataTypeはjsonpではなく、jsonを指定しています。

クロスドメインの場合のAjaxの使い方はコチラで紹介しています。

jQuery1.5のAjax

こちら少し古い書き方です。
新しい書き方の1世代前の書き方ですね。この書き方よりも古い書き方もありますので、そちらはまたこのあとに解説していきます。

function() {
    var hostUrl= 'http://localhost:8080/api/v1/tickets/100';
    $.ajax({
        url: hostUrl,
        type:'GET',
        dataType: 'json',
        timeout:10000,
    }).success(function(data) {
        alert('success!! APIの結果は、' + data.id);
    }).error(function(data) {
        alert('error!!!');
    }).complete(function(data) {
        alert('complete!!!');
    });
};

注意

じつは、このバージョンは少しややこしいので少し補足していきます。

1.6と1.5の書き方の違いは、
1.6 : done、fail、alwaysを使っています。
1.5 : success、error、completeを使っています。

となっていますが、実は1.5でもdone、failの2つであれば動作します。
しかし、alwaysは動作しません。。

jQueryの公式のドキュメントにも、alwaysはjQueryバージョン1.6からになっています。

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); (added in jQuery 1.6)

一部が使えて一部が使えないというのは、なんとも一番やっかいな代物ですね。

なので、ここでは1.5であればsuccess、error、completeを使うというように統一していきます。

jQuery1.4のAjax

さいごに、相当古いjQueyのバージョンで動作させる方法について解説していきます。このバージョン使っている会社ってまだあるのでしょうか。。

まだ使っている会社があるとすれば(TT)ですよね。。

こちらが一番古い書き方です。
少し古い書き方と微妙に似ているので注意して下さい。

function() {
    var hostUrl= 'http://localhost:8080/api/v1/tickets/100';
    $.ajax({
        url: hostUrl,
        type:'GET',
        dataType: 'json',
        timeout:10000,
        success: function(data) {
            alert('success!! APIの結果は、' + data.id);
         },
         error: function(data) {
            alert('error!!!');
         },
         complete: function(data) {
            alert('complete!!!');
         }
    })
};

注意

一番古い書き方といっても、じつはこの構文jQuery3以上でも動作するのです。

ちょっと混乱してしまいそうです。。

一覧表

さて、このページでは、新しい書き方少し古い書き方一番古い書き方の3つを紹介しました。

どのバージョンでそれぞれが動作するのかを一覧にまとめてました。

一番古い書き方が全バージョンで動作するというのが意外ではありますが、かっこ悪いので、jQueryのバージョンが新しいのであれば、新しい書き方へ統一した方がいいですね。

新しい書き方少し古い書き方一番古い書き方
jQuery1.4ngngok
jQuery1.5ngokok
jQuery1.6okokok
jQuery3.0以上okngok

サンプルソース

上記のロジックを使ったサンプルプロジェクトをコチラのGitHubで公開しています。

Ajaxで呼び出す先のAPIもJavaで実装しています。動かしたいという人はJavaに詳しい人に聞いて見て下さい。

Spring Bootを使ってサーバサイド側は実装しているので、Javaに詳しい人ならすぐ動かせると思います。

さいごに

古いjQueryを使っている会社というのは、Web系企業であればほとんどないでしょう。(と思いたいです。。。)

ですので、普通に使っていてもあえて古い書き方で書かないといけないという場面というのは少ないと思います。

ただ、ネットの情報だと古いバージョンのソースコードというのも少なくはないですので、しっかりと見極めることができるというのは大事なことです。

とはいっても、早く古いやり方が撲滅されれば混乱も少なくてすみますよね。

それでは!