perl+XMLHttpRequestを使ったAjaxサンプル

2014-09-24 15:56:05

  1. perl
  2. JavaScript
  3. 開発
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;
昔のブラウザゲームにこれがれば快適だっただろうか・・・。
[スポンサードリンク]

コメント

[スポンサードリンク]
[スポンサードリンク]