My Photo

« ウィンドウ関数 ROW_NUMBER() | Main | 新ノートPC到着 »

December 08, 2012

RESTとは?クロスドメイン通信の禁止とは?

関連する以前の記事:
RESTとは?クロスドメイン通信の禁止とは?

上記の記事を書いたときにJSONPというのは具体的にどういうものなのかわからなかったので調べてみた。

JavaScriptでURLを指定してデータを取得する場合にXMLHttpRequestを使うが、これではセキュリティ上の制約でクロスドメイン通信ができない。
※XMLHttpRequestという名前だがHTTP以外のプロトコルをサポートしている。XML以外のデータも取得できる。
そこでXMLHttpRequestを使わず、ページに

<script src="<WEBサービスのURL>" type="text/javascript"></script>
という感じのscriptタグをJavaScriptを使って動的に加えてデータを取得するという方法が考えられた。それがJSONPである。
上記のタグをみればわかるようにWEBサービスが(たぶん動的に作って)提供するスクリプトを読み込んで実行するので、JSONPに対応したWEBサービスでなければ使えない。
しかし、JSONPに対応していないWEBサービスでもYahoo! Pipesなどを間に噛ませることによってJSONPで利用することができる。

jQueryの getJSON() というメソッドを使えばJSONP対応のWEBサービスを簡単に利用することができる。

$.getJSON(url[, data][, success(data, textStatus, jqXHR)])

引数
url:URL。「url?callback=?」とすることで別ドメインにあるJSON形式のデータを取得できる。
data:サーバに送信するデータ
scccess:コールバック関数
 data:リクエストに対する
 textStatus:リクエストの現在の状態
 jqXHR:XMLHttpRequestオブジェクト

JSONPでYahoo! JAPANの電力使用状況APIを使ってみるサンプル。
まずjQueryを使わないバージョン。
JSONPを利用する場合はパラメータとしてcallbackが必須。callbackがないとJSONPではなくJSONでデータを返すだけのリクエストになる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSONPでYahoo! JAPAN の電力使用状況を取得する</title>
<script type="text/javascript">
<!--
function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var ul = document.getElementById("disp");
  for (key in root) {
    var li = document.createElement("li");
    var str = document.createTextNode(key + ":" + root[key]);
    li.appendChild(str);
    ul.appendChild(li);
  }
}

window.onload = function() {
  var btn = document.getElementById("btn1");
  btn.onclick = function() {       
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?";
    var params = "appid=dj0zaiZpPU45bTA4ZmhTelBIVSZkPVlXazlNRXd5U1dGTU5IVW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9OGE-&output=json&callback=latestPowerUsageCallback";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url + params;
    document.body.appendChild(script);
  };
};
// -->
</script>
</head>
<body>
<input id="btn1" type="button" value="JSONPデータ取得" />
<div>
<ul id="disp"></ul>
</div>
</body>
</html>

次にjQuery版。スクリプトの部分以外は上のサンプルと同じなのでスクリプトの部分だけ。
注意としてURLの後ろに必ず"?callback=?"をつけなければならない。サンプルコートのparamsの方に移動してはいけない。"callback"の部分はWEBサービスのAPIによって異なる。"=?"の部分は必ずこの通りに書く。実際のコードに合わせて"callback=<実際のコールバック関数名>"みたいに書いたりしてはいけない。

function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var tmp = "";
  var tmp2 = "";
  $.each(root, function(key, value) {
    if ($.isPlainObject(value)) {
      $.each(value, function(key2, value2) {
        tmp += "<li>" + key + ":" + key2 + ":" + value2 + "</li>";
      });
    } else {
      tmp += "<li>" + key + ":" + value + "</li>";
    }
  });
  $("#disp").html(tmp);
}

$(function() {
  $("#btn1").click(function() {
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?callback=?";
    var params = {
      appid:	"dj0zaiZpPU45bTA4ZmhTelBIVSZkPVlXazlNRXd5U1dGTU5IVW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9OGE-",
      output:	"json"
    }
    $.getJSON(url, params, latestPowerUsageCallback);
  });
});

参考文献:jQueryによるWebサービス活用ワザ実践サンプル集 Chapter1 1.1 Webサービスとは

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践
徳丸 浩

ソフトバンククリエイティブ 2011-03-03
売り上げランキング : 4070

Amazonで詳しく見る
by G-Tools

参考ページ:
[Javascript] フォートラベルAPI(REST) JSONP形式
jQuery . getJSON( url [, data] [, success( data, textStatus, jqXHR )] ) - jQuery API 日本語リファレンス:
jQuery.isArray(obj) - jQuery API 1.4.4 日本語リファレンス - StackTrace: JSON - JavaScriptプログラミング解説:
jQuery.getJSON()で別ドメインのJSONPなデータを読み込む時の注意 - kanonjiの日記:

« ウィンドウ関数 ROW_NUMBER() | Main | 新ノートPC到着 »

JavaScript」カテゴリの記事

セキュリティ」カテゴリの記事

プログラミング、技術情報」カテゴリの記事

Comments

Post a comment

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/26461/56279889

Listed below are links to weblogs that reference RESTとは?クロスドメイン通信の禁止とは?:

« ウィンドウ関数 ROW_NUMBER() | Main | 新ノートPC到着 »

August 2017
Sun Mon Tue Wed Thu Fri Sat
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
無料ブログはココログ

日本blog村

  • にほんブログ村 IT技術ブログへ
  • にほんブログ村 アニメブログへ
  • にほんブログ村 サッカーブログ アルビレックス新潟へ

好きな音楽家

メモ

XI-Prof