PHP と AJAX 投票
- 前のページ AJAX RSS リーダー
- 次のページ PHP 配列
AJAX投票
このAJAXの例では、ページをリロードしないで結果を取得する投票プログラムを示します。
今までPHPとAJAXを好きでしたか？
この例では、以下の4つの要素が含まれています：
- HTMLフォーム
- JavaScript
- PHP ページ
- 結果を保存するテキストファイル
HTMLフォーム
これはHTMLページです。それにはシンプルなHTMLフォームと、JavaScriptファイルへのリンクが含まれています：
<html> <head> <script src="poll.js"></script> </head> <body> <div id="poll"> <h2>PHPとAJAXは今まで好きですか？</h2> <form> はい： <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br /> いいえ： <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html>
例説明 - HTML フォーム
ご覧の通り、上の HTML ページにはシンプルな HTML フォームが含まれており、その <div> 要素には2つのラジオボタンがあります。
フォームの動作：
- ユーザーが "はい" または "いいえ" を選んだときにイベントがトリガーされます
- イベントがトリガーされたときに getVote() 関数を実行します
- このフォームを囲むのは名前が "poll" の <div> です。getVote() 関数からデータが返された場合、データがフォームに置き換わります。
テキストファイル
テキストファイル（poll_result.txt）には投票プログラムからのデータが保存されています。
こんな感じです：
0||0
最初の数字は "はい" 投票を示し、2番目の数字は "いいえ" 投票を示します。
注釈：ウェブ サーバーがテキストファイルを編集するのを許可してください。PHP（ウェブ サーバー）以外の人にアクセス権を与えないでください。
JavaScript
JavaScript コードは "poll.js" に保存され、HTML ドキュメントにリンクされています：
var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("ブラウザはHTTPリクエストをサポートしていません")
return
}
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()}
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("poll").
innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
例解：
stateChanged() と GetXmlHttpObject 関数は PHP と AJAX リクエスト このセクションの例は同じです。
getVote() 関数
ユーザーが HTML フォームで "yes" または "no" を選択した場合に、この関数が実行されます
- サーバーに送信する URL（ファイル名）を定義します
- URL にパラメータ (vote) を追加し、入力フィールドの内容を含むパラメータを追加します
- ランダムな数を追加して、サーバーがキャッシュされたファイルを使用しないようにします
- GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、そのオブジェクトが変更を検出した際に stateChanged 関数を実行するように設定します
- 指定された URL を使用して XMLHTTP オブジェクトを開きます
- サーバーに HTTP リクエストを送信します
PHP ページ
JavaScript で呼び出されるサーバー側のページは、"poll_vote.php"という名前のシンプルなPHPファイルです。
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
//テキストファイルに投票をインサートする
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>結果:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
例解：
JavaScript から選択された値が来ると、以下のことが起こります：
- "poll_result.txt" ファイルの内容を取得する
- ファイルの内容を変数に格納し、選択された変数に 1 を足す
- 結果を "poll_result.txt" ファイルに書き込む
- グラフィカルな投票結果を出力する
- 前のページ AJAX RSS リーダー
- 次のページ PHP 配列
