ルモーリン
ホーム更新サービス雑談ランドナーコースガイド鉄ゲタ自転車Linuxリンク連絡先

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

きっかけ

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

ブラウザ側のJavaScript

ソースを上から順に説明していくと、
  1. リクエストオブジェクトを作り
  2. URLを用意して
  3. 第3パラメタで非同期を指定して初期化して
  4. ブラウザがキャッシュせずにサーバーへ投げるようにして
  5. JSONを投げる事を指定して
  6. 応答に対する以下の挙動をリスナで用意して
  7. 応答が200(正常)のときに
  8. 応答をJSON文字列としてパース、オブジェクトにして
  9. オブジェクトから欲しい情報を取得して
  10. リクエストオブジェクトを削除して応答の挙動終了
  11. ここで初めてオブジェクトを変換したJSON文字列をサーバーへ送信
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",
}));

サーバー側のPerl

こちらは簡単で、受け取った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;