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

ajax

前回はローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。
Ajaxの一般的な使い方としては、ローカルファイルへのアクセスではなく、外部サイトへアクセスするためにAjaxを利用します。今回は外部APIへアクセスするために必要最低限となる、簡単なコードを紹介します。今後Ajaxを実装する際に参考にして頂ければ幸いです。

[スポンサーリンク]

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

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>AjaxでHTTP通信を行う</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
        function() {
            $.ajax({
              url: 'http://localhost:8080/AplExample/family',
              type:'GET',
              dataType: 'jsonp',
              timeout:1000,
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     }
            });
        });
    } );
</script>

</head>

<!-- HTML部分 -->
<body>

<h1>AjaxでHTTP通信を行う(超シンプルバージョン)</h1>
<p><input type="button" id="ajax-button" value="click" /> <br />

</body>
</html>

解説その1

AjaxでHTTP通信に成功したら、「ok」アラートが表示されます。失敗したら「ng」アラートが表示されます。
上記ソースをコピペして、ローカル環境で実行して下さい。恐らく「ng」アラートが表示されると思います。
URL部分へ、通信出来るAPIのURLを指定すると、「ok」アラートが表示されます。

Ajaxで通信可能なAPIとして、YahooAPI等があります。しかしほとんどのAPIが開発者登録を必要としているため、サンプルとして動かすためには、個別にAPIへ登録する必要があります。

解説その2

dataTypeは、以下の種類があります。サンプルコードはJSON形式のデータを読み込むために「jsonp」を指定しています。

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

注意

jsonとjsonpでは用途が全く異なります。外部APIへ接続する時はjsonpを指定します。jsonとjsonpの違いについてはいつかブログに書こうと思います。

さいごに

Ajaxは、JavaScriptを使っている人は得意だと思います。
JavaScriptが苦手な人やノンプログラマの人からは敬遠されがちです。
使ってみたら意外と簡単!と思われる技術です。
まだ使ったことのないひとは一度試してみて下さい。簡単だけど感動する技術です。(見た目がキレイなので)