prototype.jsクックブック０３　Hello Json!!

Perl prototype.js

というわけで、Perl(CGI) + prototype.jsでのJsonデータの使い方を説明します。まず、Jsonってなに？　って人は下記サイトあたりが参考になるかもしれない。

http://d.hatena.ne.jp/brazil/20050915/1126709945

とりあえず、デモを用意したので、ご覧ください。

http://ya-lab.main.jp/prototype-js-cookbook/03_hello_json/demo.html

ここでやってることは簡単。demo.htmlから非同期でreturns_json.cgiにアクセス。帰ってきた値を評価*1してalertで表示しているだけ。では、まずはdemo.htmlから。

<html><head>
  <title>prototype.js Cookbook 03: hello json!"</title>
  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript">
		
    // 非同期でJSONデータを取得する。
    function get_json_text() {
      var params = '';
      var url = 'returns_json.cgi'; 
			
      new Ajax.Request (
        url,
        {
          method: 'POST',
          parameters: params,
          onComplete: showResponse
        }
      );
    }
		
    // 帰ってきたJSONデータをevalして表示する。
    function showResponse(req, json) {
      eval("var ret = " + req.responseText);
      alert(ret.name + "("+ret.age+") : " + ret.email);
    }
  </script>
</head>
<body>

<a href="#" onclick="get_json_text(); return false;">get Json with Ajax</a>

</body>
</html>

新しいのはshowResponseのなかのevalぐらいかな？　これを見て「あれ、引数にjsonってのがあるけど、何？」って思った人は鋭い。実は今回は引数のjsonは使わない事にした。詳細はまた後日説明するかもしれないが、簡単に言うとCGI側がbody部分にJson形式データを書き出すときは今回のようにevalする。そうでなくて、レスポンスのヘッダにX-JSON: ({ ... Json Formatted Data ... })という形式でデータを送る場合は引数のjsonをそのまま利用出来るわけ。

#!/usr/bin/perl -w

use strict;
use CGI;

my $cgi = CGI->new();

my $json_txt = << "__EOL__";
(
  {
    "name": "Mr. ME",
    "age": "23",
    "email": "Mr-me at email.com"
  }
)
__EOL__

print $cgi->header(-content_type => "text/javascript",
			       -charset => "utf-8");f
print $json_txt;

ここでは静的にJSON形式のデータを表示しているだけ。簡単ですね。

*1:evalするってこと