work.log

元エンジニアの備忘録的ブログ

JSONPを使うためのPerlとjQueryのサンプルコード

投稿:

Perl と jQuery で JSONP を使うメモです。

今回、別サーバ上にあるデータを WordPress に表示させたいと思い JSONP を簡単に試してみました。

今回試した内容は以下の順で説明していきたいと思います。

  • Perl + jQuery + JSONP を使ったデモ
  • Perl モジュールのインストールと CGI のサンプルコード
  • jQuery のサンプルコード

Perl + jQuery + JSONP を使ったデモ

今回は JSONP を利用して以下のようなデモを作ってみました。

“GET” ボタンを押すと別サーバ上の “現在の時間” を取得して “yyyy/mm/dd h:m:s” 形式と “unix time” 形式で表示するという内容です。

ボタンを押す度に更新しますが若干ラグがあるかもです。

PerlモジュールのインストールとCGIのサンプルコード

Perl で JSON を使うには Perl モジュールの “JSON” を使うのが簡単です。

今回はインストール権限のないユーザーだったので、以下のような感じにユーザーディレクトリ内にモジュールをインストールしています。

// モジュールインストール用のディレクトリを作成
# mkdir -p /home/hoge/work/perl/src
# cd /home/hoge/work/perl/src

// ソースコードを CPAN から取ってくる
# wget http://search.cpan.org/CPAN/authors/id/M/MA/MAKAMAKA/JSON-2.59.tar.gz
# tar xfz JSON-2.59.tar.gz
# cd JSON-2.59/

// prefix の指定
# perl Makefile.PL PREFIX=/home/hoge/work/perl
# make
# make test
# make install

モジュールをインストール後、以下のような CGI を書きます。

# file path: /home/hoge/htdocs/output_jsonp.cgi

#!/usr/bin/perl

use strict;
use warnings;
use CGI;
use Encode;
use Time::Local;

# インストールしたパスを設定
use lib qw( /home/hoge/work/perl/lib/perl5/site_perl );
use JSON;

    my $q        = CGI->new;
    my $callback = $q->param('callback') || exit;

    # 日付データの変換処理
    my ( $sec, $min, $hour, $mday, $mon, $year ) = localtime( time );
    $year = $year + 1900;
    $mon++;
    my $date = sprintf("%04d/%02d/%02d %02d:%02d:%02d", $year, $mon, $mday, $hour, $min, $sec );

    # それぞれのデータを hash に格納
    my $hash = {
                 'unixtime' => time(),
                 'date'     => $date,
               };

    # JSON データの作成
    my $json = to_json( $hash, {utf8 => 1} );

    # JSONP データの出力
    print $q->header(-type => 'text/x-json', -charset=>'utf-8'),"$callback($json)";

    exit;

こんな感じでシンプルに書けます。

jQuery から POST される callback 変数に JSON データを入れて返すって感じですかね。

firebug で確認すると JSONP は以下の様なフォーマットになってます。

jQuery2000684208045184267_1372416576685({"date":"2013/06/28 19:27:38","unixtime":1372415258})

別に JSONP は必要なく、普通の JSON データを出力したいという場合は、 16 行目を削除し 34 行目を以下に変更するだけでいけます。

    # JSONP データの出力
    print $q->header(-type => 'text/x-json', -charset=>'utf-8'),$json;
                                                              #~~~~~~~
    exit;

この場合はこんな JSON を出力します。

{"date":"2013/06/28 19:27:38","unixtime":1372415258}

jQuery のサンプルコード

次は jQuery のサンプルコードです。jQuery の ajax を使って JSONP を取得します。

(function ($) {

    $("#jsonp [type=text]").val('');

    $("#jsonp [type=button]").click(function(){

        $.ajax({

            url: "http://dev.drive.ne.jp/output_jsonp.cgi",
            dataType: "jsonp",
            async: "ture"

            }).done(function(callback){

                // JSONP 取得成功時の処理内容
                $("#jsonp [name=date]").val(callback.date);
                $("#jsonp [name=unix]").val(callback.unixtime);

            }).fail(function(){

                // JSONP 取得失敗時の処理内容
               var err = "jsonp get error";
               $("#jsonp [type=text]").val(err);

        });

    });

})(jQuery);

html はこんな感じに。

<div id="jsonp">
    <p><input type="text" name="date" readonly="readonly" /></p>
    <p><input type="text" name="unix" readonly="readonly" /></p>
    <input type="button" value="GET"/>
</div>

後は動作確認をしてデモのように動けばとりあえず OK です。

簡単ですが、Perl で JSONP を使うについては以上になります。

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間