「とうとう」Ajax体験 (2)

一応、理屈は分かってると思うけど、説得力ないので書いてみるです。
まず、サーバ側。PerlのCGIで、単語リストの中からランダムで一語取り出して返す。

#!/xxx/perl
use strict;
my @list = qw( Water Milk Cider Coffee Wine Tea Vodka Beer );
my $x = int(rand() * @list);
print "Content-Type: text/plain\n\n";
print $list[$x];
exit 0;

クライアント側。ボタンを押すたび、CGIの単語取得を呼び出す。それをDHTMLでタグの間に追加する。Firefoxで動作確認。IEでは動かない。IEで動くようにするには、ActiveXのAPIにある"XMLHTTP"を使用する。

<html>
<head><title>Is it Ajax?</title></head>
<body>
<script language="JavaScript"><!--
function p(o) {
	document.getElementById("stdout").innerHTML += o;
}
function getNextWord() {
	var url = "/cgi-bin/test.cgi"; // CGIのURL
	var request = new XMLHttpRequest();
	request.open("GET", url, false);
	request.send("test");
	return request.responseText;
}
//--></script>
<input type="button" value=" 単語を増やす "
 onClick="p(' ' + getNextWord());">
<hr><p>単語：<span id="stdout">Drink =</span></p>
</body>
</html>

実行すると、単語がランダムに選択されて増えていきます。

単語：Drink = Water Water Coffee Cider Milk Vodka Water Coffee Water Wine Cider Coffee Beer Wine Water

前回は、ブラウザのJavaScript実装にばらつきがあることについて書いたけど、非同期であることや、より高いレスポンス性能を求められることの方が、ずっと難しい問題でしょう。

argius note

プログラミング関連

「とうとう」Ajax体験 (2)