象歩ブログ
JavaScriptで将棋盤
将棋盤に Ajax を用いる
棋譜の表示に Ajax
の手法を使ってみた。
まずは棋譜を選択する機能を実装。
再描画はチラつきも発生せず問題無い。
ということは棋譜だけ自由に GET できると云うこと。
たとえば実況中継などの頻繁に更新される棋譜でも OK だろう。
とりあえず使えることは解った。ありがたや^^; でも、深入りはしない。
HTML のセレクト文は以下のようにし、 DTML のプロパティ game_uri には棋譜を保存してあるフォルダの URI を設定して置く。
<body onLoad='createDiag()'>
<form action="" method="get" name="selectGame">
<select onchange="queryScore()">
<dtml-with "restrictedTraverse(getProperty('game_uri'))">
<dtml-in "objectValues('ZShogi')">
<option value="&dtml-absolute_url;"><dtml-var title_or_id></option>
</dtml-in>
</dtml-with>
</select>
</form>
</body<
JavaScript で HTML の 'GET' をおこなう箇所は以下の通り。
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('text/plain');
} else {
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
xmlhttp = false;
}
}
}
var scorelist = 'void';
function queryScore() {
var game = document.selectGame.elements[0].value;
var url = game + '/pubGetScore';
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = updateDiag;
xmlhttp.send(null);
}
function updateDiag() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
scorelist = xmlhttp.responseText;
createDiag();
} else {
alert('updateDiag: http status=' + xmlhttp.status);
}
}
}