ctyo cycle tech log

cycling, map and gis technology, and myself.

jQueryのgetJSONメゾットで詰まった.

ナルホド香川大学でリリースしているナルホドテレビの次期バージョンとしてHTML5を使って開発することにしました.
f:id:ctyo:20091111162829j:image:medium:right

そこでcgiに問い合せて再生リストのリストをJSONで返すようにしていたのですが,PerljQueryのデータの受け渡しで詰まるところが多かったのでメモします.

詰まり所

ajaxメゾットと違う点
データにヘッダ的なものを付ける必要がある点
cpanのJSONでencode_jsonしたままの形式だとjQueryがJSON形式のデータとして扱ってくれない点

ajaxメゾットと違う点

クロスドメインでは対応しないよということが分かったのでgetJSONを使うことに.2つの違いが以下

データにcallback用のヘッダ的なものを付ける必要がある点

ajaxの時はそのまま以下のような形で送ればデータとして読み込んでくれたのですが,getJSONではcallback用のヘッダ的なものを付ける必要があるとのことでした.

 ajax: ["hoge", "fuga","foo", "bar"]
 getJSON: jQuery123456777["hoge", "fuga","foo", "bar"]

cpanのJSONでencode_jsonしたままの形式だとjQueryがJSON形式のデータとして扱ってくれない点

PerlのJSONモジュールのencode_jsonをドキュメント通りに配列のリテラルを渡すようにすると,以下のように書き出される.

#!/usr/bin/perl
use strict;
use JSON qw/encode_json/;

my @array = qw();
my $json = encode_json(\@array);
print "Content-Type: application/json; charset=utf-8\n\n";
print $json;
jQuery123456777["hoge", "fuga","foo", "bar"]

が,jQueryがJSONだとして取り扱ってくれないので,カッコをつけるようにしました.こんなのでいいのか....

print $callback.'('.$json.')';
jQuery123456777(["hoge", "fuga","foo", "bar"])

そんなこんなで3時間ぐらいはまってしまっていました.しょーもなっ
f:id:ctyo:20110617211606p:image
画像はfrickerのapiが返してくるデータ,これを参考にコードを直しました...
参考
http://www.ibm.com/developerworks/jp/web/library/wa-aj-jsonp1/#jquery_support
http://search.cpan.org/dist/JSON/lib/JSON.pm#encode_json