DBWordPressLinuxChromeWebツールブログTop2013年1月28日Ajaxで外部APIへ通信する方法コチラではローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。今回は、クロスドメインの外部のAPIへアクセスする方法を紹介していきます。jQueryのバージョンによってAjaxの構文が少し変わります。このあたりも各バージョン毎の構文を紹介していきます。[スポンサーリンク]Ajaxで外部APIへ通信するコードjQueryのバージョンが1.6以上でしたらこちらのコードが使えます。jQueryのAjaxの書き方としては一番新しい書き方です。);今回使用した外部APIユーザ登録が不要で無料で使える外部APIを利用させて頂きました。コチラのサービスでは、ランダムでダミーのユーザ情報をJSON形式で返却してくれるAPIです。jQuey1.6で実行してみますコチラは実際に動かしてみたサンプルです。ボタンをクリックするとAjax通信が走り、結果が表示されます。CodePen.ちなみにjQueryのバージョンが3以上でも同じ書き方で動作します。CodePen.dataTypeについて外部のAPIへアクセスする際には、dataTypeへ「jsonp」を指定しています。クロスドメインのAPIへアクセスする場合には「jsonp」を指定しましょう。jsonではなく、後ろにpがついているやつです。コチラはdataTypeへ指定することのできる文字列一覧です。xmlhtmlscriptjsonjsonptextjQuey1.5でAjax通信するさて、ここからはちょっと古いjQueyのバージョンで動作させる方法について解説していきます。バージョン1.5での動かし方です。jQueryのAjaxの書き方としては少し古い書き方です。);done、fail、alwaysからsuccess、success、completeへと変更になっています。じつは、jQuery1.5だとdone、failは動くけど、alwaysは動かないという仕様になっています。うーん、どうせなら全部動かないで統一した方がいいような気もしますが。1.6)公式のドキュメントを見てみても、alwaysはjQueryバージョン1.6からになっていますね。jQuey1.5で実行してみますコチラも実際に動かしてみましょう。CodePen.jQuey1.4でAjax通信するさいごに、jQuey1.4という相当古いjQueyのバージョンで動作させる方法について解説していきます。jQueryのAjaxの書き方としては一番古い書き方です。});});jQuey1.4で実行してみますコチラも実際に動かしてみましょう。CodePen.構文がガラリと変わりましたね。これが一番古い書き方です。この書き方ですが、バージョン3以上のjQueryでも動作しちゃうんですよ。こんがらがってきてしまいましたね。jqXHR.complete()が廃止となったため、少し古い書き方はNGとなりますが、一番古い書き方は使えるというちょっとややこしい現象がおきています。instead.さいごにjQueryのバージョンが変わるとAjaxのコールの仕方がかなりかわることに注意して下さい。いっても、古いバージョンのjQueryを使うということをやめればよいだけのような気もしますが、会社によっては影響範囲が分からないという理由に古いのを使い続けるというところもあるから注意しないといけないですよね。それでは!TweetPocket[スポンサーリンク]最後まで読んでいただきありがとうございます!この記事はお役に立てましたか?お役に立てたことがあればシェアしていただけると嬉しいです!TwitterFacebookPocketはてブGoogle+Feedly関連している記事をピックアップしました!こちらの記事もあわせて読んで頂ければ嬉しいです。Ajaxを使って非同期通信する。