HTMLは更新せずにサーバーから非同期で新たなデータを取得する、いわゆる「Ajax」(もう古いか…?)のperl+XMLHttpRequestを使ったサンプルです。
とにかくシンプルに動くものをまとめてみました。
CGIファイル2個にまとめています。
CGIのアップロードとか文字コードとかは、ある程度わかる方を対象としています。
動作しているサンプルはコチラ
「通信します。」をクリックすると、別のCGIから文字列を取得して「通信・・・」の部分の文字列に代入します。
(今は「通信・・・完了しました!」という文字列を取得しています)
以下をコピペして、サーバーにアップロードすれば動作するはずです。
◆index.cgi
#!/usr/bin/perl
print "Content-type: text/html¥n¥n";
print qq{
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var mRequest;
function getData() {
mRequest = new XMLHttpRequest();
mRequest.onreadystatechange = checkReadyState;
mRequest.open( "GET", "echo.cgi", true );
mRequest.send( null );
}
//通信が完了したら呼ばれる関数
function checkReadyState(){
//完了しているか?
if( mRequest.readyState == 4 && mRequest.status == 200 ){
//結果をHTMLのIDが「test」のものに代入する
document.getElementById( "test" ).innerHTML = mRequest.responseText;
}
}
</script>
</head>
<body bgcolor="#f0f0f0" text="#444488" link="#3333cc" alink="#3333ff" vlink="#3333ff">
<input type="button" onclick="getData()" value="通信します。">
<hr>
<div id="test">通信・・・</div>
};
◆echo.cgi
#!/usr/bin/perl
print "Content-type: text/html¥n¥n";
print "通信・・・完了しました!";
exit;
昔のブラウザゲームにこれがれば快適だっただろうか・・・。