Ajax/PerlでhelloWorld改
Ajax/Perlで単純なインタラクティブ画面を作成します。
ボタンを押すたびに「hello world」「This is Ajax/Perl-test-1.」という文字列
を交互に出します。さらに補助的にクライアントからサーバ
に送られた数値を表示しています
|
|
|
|
CGI/Servletなどがページ全体のHTML記述をサーバから送るのに対し、
AJAXではサーバからはデータを送り、クライアント側でそのデータを
解釈し表示に反映させる方法をとります。
AJAXでは通常クライアント側ではJavaScriptを動かします。サーバ側
はPerl,PHO,Javaなどを動かします。
クライアントとサーバのやり取りはこれまで通りHTTPに準拠したまま
サーバからクライアントに送るテキストをページ全体から、"データ"
に置き換えたものです。
この例は後述の クライアント側HTML記述 、 サーバ側perl記述 で動いています。
サーバ機構（apache+perl)の構築
サーバの仕組みは通常のCGIと変わるものではありません。次の記事で作成したベースの上に作成しています。
クライアント側記述（HTML+JavaScript)
ここではファイル名は "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\test\hello_perl_XML_ajax.htm" としています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
var count=0;
var xmlHttp;
function getMessage(){
++count;
document.form1.text.value="";
// xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", "http://localhost/cgi-bin/hello_perl_XML.cgi?C="+count,true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
//alert(xmlHttp.responseText);
document.form1.text.value
= xmlHttp.responseXML.documentElement.firstChild.firstChild.nodeValue;
}
}
// -->
</script>
</head>
<body>
<form><input type="button" value="Click Me" onClick="getMessage()"></form>
<form name="form1" ><input type="text" name="text" size="50"/></form1>
</body>
</html>
サーバに渡すデータの設定:
サーバプログラムにはHTTPプロトコルのGETでアクセス
しています。GETの場合クライアントからサーバへ渡す値はURLにクエリ文字列
として付加されます。
変数countの値をURLの後半にセットしています。次の形となります。赤文字の
部分は毎回カウントアップされた値となります。
http://localhost/cgi-bin/hello_perl_XML.cgi?C=5
最後のC=5がサーバのプログラムに渡すデータです。
なお、ここではパラメタは一つだけですが複数渡す場合は&でつなぎます。
http://localhost/cgi-bin/hello_perl_use_CGI.cgi?C=5&D=ab&name=hohoho
サーバからのデータを画面に反映させる:
サーバから送り返されるデータはXML形式であり、クライアントの
JavaScriptはxmlHttp.responseXMLでDOMを取得します。
ここではデータは次の形式をしています。赤文字の部分は毎回
変わります。
<?xml version="1.0" encoding="UTF-8" ?> <root> <message>Hello Morld. (7)</message> </root>DOMの階層と解析の対応は次のようになっています。
xmlHttp.responseXML.documentElement <root> .firstChild <message> .firstChild "Hello Morld. (7)"
XMLが形式ミスのため取得できない場合でもresponseTextで文字列は 取得可能です。ここではデバグ用のalertをコメントの形で残しています。
サーバ側記述(perl)
perlを用いてサーバ側動作を定義します。
ファイル名はここでは
"C:\Program Files\Apache Software Foundation\Apache2.2\cgi-bin\hello_perl_XML.cgi"としています。
#!c:/Perl/bin/perl.exe
use CGI;
$http = new CGI;
$c = $http->param('C');
print "Content-type: text/xml; charset=utf-8\r\n";
print "\r\n";
print '<?xml version="1.0" encoding="UTF-8" ?>';
print "<root><message>";
if ( ($c%2)==1 ) {
print "Hello Morld. (".$c.")";
}
else{
print "This is Ajax/Perl-test-1. (".$c.")";
}
print "</message></root>";
CGIではHTMLによるページデータをprintしますが、AjaxではデータのXML
をprintします。Content-typeがtext/xmlであることに注意してください。
charsetがutf-8であるのはperlの出力の制限です。
このデータを受けてクライアント側JavaScriptが動きます。
use CGI;CGI.pmの使用:
CGI.pmはHTTPの受信パラメタの解析や、送信テキストの作成を手助けする
ライブラリです。
$http->param(パラメタ名)でURLに付加されたパラメタを取得することが
できます。
実行
ブラウザで次のアドレスを与えています。
http://localhost/test/hello_perl_XML_ajax.htm
最初の画面が出ます。
|
|
ボタンをクリックすると、サーバ側のPerlが動き、データを受けクライアント側のJavaScript で画面に変更を加えます。
|
|
サーバ側プログラムはページを生成しないので、WEBで直接アドレスを指定 することはできません。
HTTPプロトコルトレース
HTTPプロトコルのトレースを載せます。
クライアントで[Click Me]を押した時のサーバ呼び出しです。
------------- クライアント=>サーバ ----------------- GET /cgi-bin/hello_perl_XML.cgi?C=7 HTTP/1.1 Accept: */* Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Host: localhost:10080 Connection: Keep-Alive ----------------------------------------------------Hostが10080となっているのはこのトレースを出すために 中継で使ったプログラムのポートです。
「Hello Morld」応答です。
------------- サーバ=>クライアント ----------------- HTTP/1.1 200 OK Date: Wed, 23 Sep 2009 11:26:19 GMT Server: Apache/2.2.11 (Win32) Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/xml; charset=utf-8 57 <?xml version="1.0" encoding="UTF-8" ?><root><message>Hello Morld. (7)</message></root> 0 ----------------------------------------------------XML文の前の57はXML部のサイズを示しています。これはTransfer-Encodingがchunked となっているときのデータ部の表現方です。0は終了を示します。
| 固定リンク