Ajaxで外部APIへ通信する方法

ajax

コチラではローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。

今回は、クロスドメインの外部のAPIへアクセスする方法を紹介していきます。
jQueryのバージョンによってAjaxの構文が少し変わります。このあたりも各バージョン毎の構文を紹介していきます。

[スポンサーリンク]

Ajaxで外部APIへ通信するコード

jQueryのバージョンが1.6以上でしたらこちらのコードが使えます。
jQueryのAjaxの書き方としては一番新しい書き方です。

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        $.ajax({
            url: 'https://randomuser.me/api',
            type:'GET',
            dataType: 'jsonp',
            timeout:10000,
        }).done(function(data) {
            alert("Ajax通信の成功");
        }).fail(function(data) {
            alert("失敗");
        }).always(function(data) {
            alert("Ajax終了時に呼ばれるメソッド");
        });
    });
} );

今回使用した外部API

ユーザ登録が不要で無料で使える外部APIを利用させて頂きました。
コチラのサービスでは、ランダムでダミーのユーザ情報をJSON形式で返却してくれるAPIです。

jQuey1.6で実行してみます

コチラは実際に動かしてみたサンプルです。
ボタンをクリックするとAjax通信が走り、結果が表示されます。

See the Pen Ajax Jsonp ver jQuery1.6 by morinkey (@morinkey) on CodePen.

ちなみにjQueryのバージョンが3以上でも同じ書き方で動作します。

See the Pen Ajax Jsonp ver jQuery3.0 by morinkey (@morinkey) on CodePen.

dataTypeについて

外部のAPIへアクセスする際には、dataTypeへ「jsonp」を指定しています。
クロスドメインのAPIへアクセスする場合には「jsonp」を指定しましょう。jsonではなく、後ろにpがついているやつです。
コチラはdataTypeへ指定することのできる文字列一覧です。

  • xml
  • html
  • script
  • json
  • jsonp
  • text

jQuey1.5でAjax通信する

さて、ここからはちょっと古いjQueyのバージョンで動作させる方法について解説していきます。
まずはバージョン1.5での動かし方です。
jQueryのAjaxの書き方としては少し古い書き方です。

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        $.ajax({
            url: 'https://randomuser.me/api',
            type:'GET',
            dataType: 'jsonp',
            timeout:10000,
        }).success(function(data) {
            alert("Ajax通信の成功");
        }).success(function(data) {
            alert("失敗");
        }).complete(function(data) {
            alert("Ajax終了時に呼ばれるメソッド");
        });
    });
} );

done、fail、alwaysからsuccess、success、completeへと変更になっています。

じつは、jQuery1.5だとdone、failは動くけど、alwaysは動かないという仕様になっています。
うーん、どうせなら全部動かないで統一した方がいいような気もしますが。。。

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

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

jQuey1.5で実行してみます

コチラも実際に動かしてみましょう。

See the Pen Ajax Jsonp ver jQuery1.5 by morinkey (@morinkey) on CodePen.

jQuey1.4でAjax通信する

さいごに、jQuey1.4という相当古いjQueyのバージョンで動作させる方法について解説していきます。
jQueryのAjaxの書き方としては一番古い書き方です。

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        $.ajax({
          url: 'https://randomuser.me/api',
          type:'GET',
          dataType: 'jsonp',
          timeout:1000,
          success: function(data) {
             alert("Ajax通信の成功");
          },
          error: function(data) {
             alert("失敗");      
          },
          complete: function(data) {
             alert("Ajax終了時に呼ばれるメソッド");
          }
        });
    });
});

jQuey1.4で実行してみます

コチラも実際に動かしてみましょう。

See the Pen Ajax Jsonp ver jQuery1.4 by morinkey (@morinkey) on CodePen.

構文がガラリと変わりましたね。
これが一番古い書き方です。
しかし、この書き方ですが、バージョン3以上のjQueryでも動作しちゃうんですよ。

ちょっとこんがらがってきてしまいましたね。。
少しまとめてみましょう。

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

ちなみに、jQuery3以上だと、jqXHR.success(), jqXHR.error(), and jqXHR.complete()が廃止となったため、少し古い書き方はNGとなりますが、一番古い書き方は使えるというちょっとややこしい現象がおきています。

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

さいごに

jQueryのバージョンが変わるとAjaxのコールの仕方がかなりかわることに注意して下さい。

といっても、古いバージョンのjQueryを使うということをやめればよいだけのような気もしますが、会社によっては影響範囲が分からないという理由に古いのを使い続けるというところもあるから注意しないといけないですよね。

それでは!