Ajax/PHPでhelloWorld改
Ajax/PHPで単純なインタラクティブ画面を作成します。
ボタンを押すたびに「hello world」「This is Ajax/PHP-test-1.」という文字列
を交互に出します。さらに補助的にクライアントからサーバ
に送られた数値を表示しています
|
|
|
|
CGI/Servletなどがページ全体のHTML記述をサーバから送るのに対し、
AJAXではサーバからはデータを送り、クライアント側でそのデータを
解釈し表示に反映させる方法をとります。
AJAXでは通常クライアント側ではJavaScriptを動かします。サーバ側
はPerl,PHO,Javaなどを動かします。
クライアントとサーバのやり取りはこれまで通りHTTPに準拠したまま
サーバからクライアントに送るテキストをページ全体から、"データ"
に置き換えたものです。
この例は後述の クライアント側HTML記述 、 サーバ側php記述 で動いています。
次の記事で作成したベースの上に作成しています。winAjaxPerlのPerlを phpに置き換えたものです。
ＰＨＰのインストール
次のサイトからPHPをインストールします。
http://www.php.net/
設定
path環境変数にPHPのインストールディレクトリを設定します。
[スタート]-[設定]-[コントロールパネル]:[システム]:「詳細設定」-[環境変数]
のpathに追加します。
ここではC:\Program Files\PHPを追加しました。
確認:
コマンドプロンプトでphp -vと打ちバージョン番号が出ることを確認します。
クライアント側記述（HTML+JavaScript)
ここではファイル名は "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\test\test_php_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_php_txt.cgi?C="+count, true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
//alert("response="+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>
サーバに渡すデータの設定:
サーバにはGETでアクセスしています。
変数countの値をURLの後半にセットしています。例えば次のような形となります。
http://localhost/cgi-bin/hello_perl_txt.cgi?5
最後の5がサーバのプログラムに渡すデータです。
サーバ側記述(PHP)
ここではPHPを用いてサーバ側スクリプトを書いています。
ファイル名は
"C:\Program Files\Apache Software Foundation\Apache2.2\cgi-bin\hello_php_txt.cgi"
としています。
#!c:/Program Files/PHP/php-cgi.exe
<?php
$doc = new DOMDocument;
$root= $doc->createElement("root");
$doc->appendChild($root);
$msg = $doc->createElement("message");
$root->appendChild($msg);
$t=$_GET['C'];
if ( ($t%2)==1 ) {
$txt= $doc->createTextNode("Hello World. (".$t.")");
$msg->appendChild($txt);
}
else{
$txt= $doc->createTextNode("This is Ajax-PHP-test-1. (".$t.")");
$msg->appendChild($txt);
}
header("Content-type: text/xml; charset=utf-8");
print $doc->saveXML();
?>
header(...)でcontext-typeを指定していることに注意してください。
クライアントからのデータ（引数）の引き取り:URLに付加したパラメタをS_GET[パラメタ名]で取得しています。
実行
ブラウザで次のアドレスを与えています。
http://localhost/test/hello_php_ajax.htm
最初の画面が出ます。
|
|
ボタンをクリックすると、サーバ側のPerlが動き、データを受けクライアント側のJavaScript で画面に変更を加えます。
|
|
サーバ側プログラムはページを生成しないので、WEBで直接アドレスを指定 することはできません。
| 固定リンク