prototype.jsでAjax!

Javascript

仕事で作っているアプリケーションでもAjaxを一部使っているものの、今みたいにAjaxライブラリが普及する前だったもんでゴリゴリ自作したマイライブラリを使っています。といっても先輩が作ったものなので、自分では作っていない。
Ajaxを勉強するうえで、今更自作するのもイマイチだし、勉強中のprototype.jsでAjaxをやってみるぞ。

どうやるかというと、これだけのようだ。素晴らしい。

new Ajax.Request(url, option);

非同期通信してレスポンスを返す方も用意しないと。自分でCGIなりサーブレットなりを自作するのも面倒なので、既存のものを利用。路線データが取得できるウェブサービスが公開されているので、今回はこれを利用。レスポンス形式としてXMLとJSONが選択できるものいいね。
HeartRails Express : http://express.heartrails.com/

以下そのサンプル。

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function init() {

	var url = 'http://express.heartrails.com/api/json';

	var prefectureOpt = {
	  method: 'get',
	  parameters: 'method=getPrefectures',
	  onComplete: function(arg) {
	    var json;
	    eval('json=' + arg.responseText);
	    var prefectures = json.response.prefecture;

	    var select = $('prefecture');

	    for(var i=0; i<prefectures.length; i++) select.options[i] = new Option(prefectures[i], prefectures[i]);
	  }
	};

	new Ajax.Request(url, prefectureOpt);
}

</script>
</head>

<body onload="init();">
	都道府県：
	<select name="prefecture" id="prefecture">
	</select>
</body>
</html>

このプログラム、なぜかfirefoxでは動かんかった。Ajax通信のところでExceptionが発生していた模様。onExceptionでイベントハンドリングできたから。ただ原因調査までは出来てませんが。
あと、JSON形式の文字列をオブジェクトに変換する方法が分からずちょいはまりました。が、それ以外はすんなりと。
非同期通信するうれしさはこのプログラムだけではいまいちで、都道府県を選択したら、線が選択されて、、、とやらないとね。

parameterにmethod=getLinesとし、prefecture=選択した都道府県とすれば、線が取れます。