ブラウザとサーバーをJSONで連絡

このサービスを作っていて簡単な連絡方法を模索してた。 ボーカロイド楽曲検索サービス - サービス - ルモーリン

ソースを上から順に説明していくと、

1. リクエストオブジェクトを作り
2. ＵＲＬを用意して
3. 第３パラメタで非同期を指定して初期化して
4. ブラウザがキャッシュせずにサーバーへ投げるようにして
5. ＪＳＯＮを投げる事を指定して
6. 応答に対する以下の挙動をリスナで用意して
7. 応答が２００（正常）のときに
8. 応答をＪＳＯＮ文字列としてパース、オブジェクトにして
9. オブジェクトから欲しい情報を取得して
10. リクエストオブジェクトを削除して応答の挙動終了
11. ここで初めてオブジェクトを変換したＪＳＯＮ文字列をサーバーへ送信

var xhr = new XMLHttpRequest();
var url = "https://www.?????.jp/cgi-bin/?????.cgi";
xhr.open("POST", url, true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.addEventListener("load", function (ev) {
	if (200 == ev.target.status) {
		var res = JSON.parse(xhr.responseText);
		/* 省略、サーバーが返したres.resultとか参照可 */
	}
	delete xhr;
});

xhr.send(JSON.stringify({
	"function": "summary",
}));

こちらは簡単で、受け取ったJSON文字列をハッシュリファレンスにした後、中身を見て処理します。 最後に結果のハッシュリファレンスをJSON文字列に変換して返します。 この返した奴がブラウザのJavaScript（リスナ）に届く訳です。

#!/usr/bin/perl -w

use utf8;
use strict;
use warnings;
use open IO => ":utf8";

use CGI '-utf8';
use DBI;
use Encode::Locale;
use Encode;
use JSON;

$| = 1;

my $cgi = new CGI;
my $param = decode_json scalar $cgi->param("POSTDATA");

my $result;
if (defined $param && exists $param->{function}) {
        if ("search" eq $param->{function}) {
                $result = search($param);
        } elsif ("summary" eq $param->{function}) {
                $result = summary($param);
        } else {
                $result = {
                        result => "invalid function",
                };
        }
}

print "Access-Control-Allow-Origin: www.lemorin.jp\r\n";
print "Content-type: application/json; charset=utf-8\r\n";
print "\r\n";
print encode_json $result;

exit;