[JavaScript] JSONPを利用する

このページのタグ:[JavaScript] [JSONP]
JSONPについて紹介します。

サンプル:シンプルなサンプル

サンプルコードから紹介します。

コード

sample.js

JSONPのデータを返すファイルです。MIME Typeの関係で拡張子をjsにしておくとよいです。

apicallback ( { 'name': 'penguin', 'price' : '550' });
解説
apicallback がJSONPの提供するデータへのアクセスのためのインターフェイスとなるコールバック関数です。

Page1.html

JSONPを呼び出すHTMLファイルです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript">
    function apicallback(json)
    {
      alert(json.name);
    };
  </script>
</head>
<body>
  <script type="text/javascript" src="sample.js"></script>
</body>
</html>
解説

  <script type="text/javascript" src="sample.js"></script>
上記がJSONPを呼び出すScriptタグです。JSONPはコールバック関数の呼び出しが記述されているため、すぐに下記のapicallback()関数を呼び出します。

  <script type="text/javascript">
    function apicallback(json)
    {
      alert(json.name);
    };
  </script>


apicallback()関数が呼び出された際に、引数のjsonには、sample.jsに記述された値が渡されます。

{
  'name': 'penguin',
  'price' : '550'
}
のJSONオブジェクトが引数に与えられます。
コールバック関数apicallback()内で、与えられたオブジェクトのnameプロパティの値をalert()で表示します。

実行結果

HTMLファイルをWebブラウザで表示します。アラートダイアログが表示され、JSONPに記述したnameプロパティの値"penguin"が表示されます。

クロスドメインでの利用

JSONPでは、先に紹介したsample.jsを別のドメインに配置することができます。
これは、JSONはXMLHttpRequestを用いてファイルを読み込んでいますが、JSONPでは、外部JavaScriptファイルの読み込みを利用しているためです。
先のHTMLファイルのscriptタグのsrc属性に読み込み先のJSONのURLを記載すれば、他のドメインのJSONPファイルが読み込めます。
Page1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript">
    function apicallback(json)
    {
      alert(json.name);
    };
  </script>
</head>
<body>
  <script type="text/javascript" src="http://subdomain.ipentec.com/datademo/sample.js"></script>
</body>
</html>

サンプル:より実用的な例

先のサンプルコードでは"sample.js"ファイル1つにつき1つのコールバック関数しか呼び出せない実装でした。複数のコールバック関数を切り替える場合は、JSONPのファイルを複数用意する必要があります。APIの個数分ファイルを用意しても良いですが、パラメーターで切り替えられるようにするのも良い方法です。

コード

以下のコードを記述します。

Page2.html

JSONPを呼び出すHTMLページです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript">
    function api1callback(json)
    {
      alert("価格:"+json.price);
    };
    function api2callback(json) {
      alert("高さ:"+json.height);
    };

    function loadJS(src) {
      var script = document.createElement('script');
      script.src = src;
      document.body.appendChild(script);
    }

  </script>
</head>
<body>
  <input id="Button1" type="button" value="Price" onclick="loadJS('JsonpHandler.ashx?api=price')"/>
  <input id="Button1" type="button" value="Height" onclick="loadJS('JsonpHandler.ashx?api=height')"  />
</body>
</html>
解説
上記のコードではJSONPファイルを動的に読み込んで動作します。動的な読み込みはloadJS()関数で実行されます。scriptタグを作成し、動的にbodyタグ内に書きだすことでJSONPファイルを読み込みます。
JSONPファイルのハンドラでは2種類のAPIがあり、ハンドラapiパラメータの値を指定することで呼び出されるJSONPが変化します。

JsonpHandler.ashx.cs

JSONPを返すジェネリックハンドラーです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JsonpDemo
{
  /// <summary>
  /// JsonPHandler の概要の説明です
  /// </summary>
  public class JsonPHandler : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      string apiquery = context.Request.QueryString["api"];
      context.Response.ContentType = "application/javascript";

      if (apiquery == "price") {
        context.Response.Write("api1callback({ 'name': 'penguin', 'price': '550' });");
      }
      else {
        context.Response.Write("api2callback({ 'name': 'penguin', 'height': '220' });");
      }
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}
解説
ハンドラ-側では、リクエスト時のapiパラメータの値を取得し、値が"price"であれば、api1callbackを呼び出すJSONPを、それ以外であればapi2callbackを呼び出すJSONPを返します。

実行結果

プロジェクトを実行し、Page2.htmlを表示します。下図の画面が表示されます。


[Price]ボタンをクリックするとapi1callback()関数が実行され、アラートダイアログに価格情報が表示されます。


[Height]ボタンをクリックするとapi2callback()関数が実行され、アラートダイアログに高さの情報が表示されます。

補足

JSONPの処理はサーバー側でする必要があるため、CGIなどのサーバー側プログラムで実装する必要があります。
JavaScriptでJSONP側の記述を実装しても、実行はクライアント側になるため、パラメーターの伝達がうまくできません。
登録日 :2014-08-21    最終更新日 :2014-08-22
このページのタグ:[JavaScript] [JSONP]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)