jQuery.getJSON の利用。　寝太郎の江戸風呂。ね！

2024
04
19

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/19 (Fri.)

2011
04
29

jQuery.getJSON の利用。

前々回は、「東京電力需給状況」のページを紹介し、前回は、そのデータ元である「電力使用状況API」について説明しました。

今回は、「電力使用状況API」からのデータを JSON で取得する方法を jQuery の getJSON メソッドで取得する方法を説明します。

Google Ajax API からの jQuery のロード

私は最近、jQueryは、Google Ajax API からロードするようにしています。Google Ajax API を利用するメリットは、それが普及すればするほど、ネット全体のキャッシュ効果が高まることが挙げらています。

また、複数のサイトを運営している場合には、それごとに jQuery のファイルを置く必要がなくなること、それに伴い、そのファイルへのパスをいちいち確かめる必要がなく、同一の記述がのままでよいという作業面のメリットもあります。ほとんどの場合、次のように記述するだけです。

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
>
</script>

バージョンはいくつかあります。また、"jsapi"をロードしている場合には、別の記述方法で jQuery をロードできます。

<script
 src="http://www.google.com/jsapi"
 type="text/javascript">
</script>
<script type="text/javascript">
 google.load("jquery", "1.5");
</script>

サブバージョンの指定を省略すると、指定した部分までの最新バージョンを読み込めるようです。

jQuery.getJSON()

基本の構文は次のとおりです。

$.getJSON(url,data,callback)

urlにクエリストリングが含まれている場合には、次の形でもOKです。

$.getJSON(url,callback)

ただし、別のドメインのデータにリクエストする場合は、これに手を加える必要があります。

$.getJSON(url+"&callback=?",data,callback)

コールバック関数名を指定する部分を"?"にします。この"?"の場所が jQuery が裏で内部的に付けるコールバック関数名に置き換わります。

jQuery.getJSON()で東京電力の使用量データを取得する。

「電力使用状況API」のリクエストURLは、前回紹介しました。これを jQuery を使ってリクエストする場合には、次のように記述します。

var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?";
var data={
 appid:あなたのアプリケーションID,
 output:"json"
};
$.getJSON(url+"&callback=?",data,callback);

次のような記述も可能です。

var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?
appid=あなたのアプリケーションID&output=json&callback=?";
$.getJSON(url,callback);

コールバック関数を定義する。

JSONPですから、データを受け取った際の処理をコールバック関数で定義しておく必要があります。返されるデータは、次のようなハッシュオブジェクトの形ですので、それを念頭に使用するデータを取得します。

{"ElectricPowerUsage":
  {"Area"    :"tokyo",
   "Usage"   :{"@unit":"kW","$":32910000},
   "Capacity":{"@unit":"kW","$":40000000},
   "Date":"2011-04-27",
   "Hour":19
  }
}

返されるデータを resonse で受けるとすると次のように記述します。

callback=function(response){
 var e=response.ElectricPowerUsage;
 var text=e.Date + ' '+ e.Hour + 'の電気使用量は' + e.Usage.$+e.usage.@unit +'です。':
 alert(text); 
}

次回は、Google Chart API を利用したデータのグラフ化をテーマにします。

2011/04/29 (Fri.) Trackback() Comment(0) Google Ajax API

Comments