JSONP

JavaScript

JSONがよくわからなかったので、少し勉強した。

以下がjQueryでJSONを使った例です。

<html>
  <head>
    <title>JSONPテスト</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
      var url = "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?output=json&callback=?";
      $.getJSON(url,{
         appid:"???",
         query:"花",
         results:10
      },function(json){
         var results = json.ResultSet.Result;
         for(var i=0;i<results.length;i++){
	    var url = results[i].Url;
            var img = document.createElement('img');
            img.src = url;
            img.width = 120;
            img.height = 90;
            $("#json").append(img);
         }
      });
    </script>
  </head>
  <body>
    <h1>サムネイル一覧</h1>
    <div id="json"></div>
  </body>
</html>

「Yahoo! API」へJSONを要求して、
返ってきたら関数を呼び出す。
jQueryなどを使って画像を表示した。


※appid は設定の必要があります。


勉強になったのは、callbackパラメータを付けると、
f:id:t-kashima:20100711133246p:image
関数呼び出しの形で返ってくること。


これだと、funcという関数があれば返答があればfuncが自動で呼び出される。