gist

  • Feb
  • 18
  • 2013

IT

JSONPについて勉強した

JSONP(JSON with padding)とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。HTMLのscriptタグ、JavaScript(関数)、JSONを組み合わせて実現される。 ブラウザなどに実装されている「同一生成元ポリシー」という制約により、Webページは通常、自分を生成したドメイン以外のドメインのサーバと通信することはできない。 しかし、HTMLのscriptタグのsrc属性には別ドメインのURLを指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。 JSONPでは、通常、上記src属性のレスポンスの内容はjavascript関数呼び出しの形式となるため、src属性に指定するURLにその関数の名前をクエリ文字列の形式で付加する。一般的な方法では、この時に指定する関数名はWebページ側ですでに定義されているコールバック用の関数の名前になる。

Wikipediaより

サーバ側は?callback=hogeで指定したコールバックでJSONを包んで返してくれるようなAPIで、
クライアントはそれを<script>タグのsrcで指定して呼び出す仕組みらしい。
<script>タグを使うからドメインを超えて通信できるのでレスポンスヘッダに

Access-Control-Allow-Origin: *

が入っていないJSON-APIをブラウザから呼ぶ時とかに使うといいっぽい。

実践編

githubのAPIをJSONPで叩いてみる


JSONPの結果をココに表示


このページのソース

<script type="text/javascript">
              $("#jsonp_run").on("click",function(){
                var jsonp = new JSONP();
                jsonp.request("https://api.github.com/users/georgeosddev",function(res){
                  var flagment = document.createDocumentFragment();
                  for (var key in res["data"]){
                    var span = document.createElement('span');
                    span.innerText = key+":"+res["data"][key]+"\r\n";
                    flagment.appendChild(span);
                  }
                  $("#jsonp_result").append(flagment);
                });
              }).on("touchstart",function(){
                $(this).trigger("click");
              });
              </script>
              

jsonp-client.js

できた。\(^o^)/