この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
ブラウザの実行結果
途中でsend.php内の「OK」という文字を変更して保存するとHTML上にメッセージを出すようにしています。send.phpでDBからデータを取得し、返すという風にも出来るかと思います。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery & Ajax & PHP Example</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
/** PHPから返される結果格納用 */
var result = null;
/**
* タイマーで5000ミリ(5)秒枚にAjax通信を行い、send.phpにアクセスする
*/
setInterval(function()
{
//GETメソッドで送るデータを定義します var data = {パラメータ名 : 値};
var data = {request : "SEND"};
/**
* Ajax通信メソッド
* @param type : HTTP通信の種類
* @param url : リクエスト送信先のURL
* @param data : サーバに送信する値
*/
$.ajax({
type: "GET",
url: "send.php",
data: data,
dataType: "text",
/**
* Ajax通信が成功した場合に呼び出されるメソッド
*/
success: function(data, dataType)
{
//初回アクセス時
if(result == null) result = data;
//PHPより取得した値が違えばメッセージを<div id="text"></div>に出す
if(result != data) $('#text').text("値が変更されました :" + data);
result = data;
},
/**
* Ajax通信が失敗した場合に呼び出されるメソッド
*/
error: function(XMLHttpRequest, textStatus, errorThrown)
{
//通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。
//this;
//thisは他のコールバック関数同様にAJAX通信時のオプションを示します。
//エラーメッセージの表示
alert('Error : ' + errorThrown);
}
});
}, 5000);
});
</script>
</head>
<body>
<h1>jQuery & Ajax & PHP でタイマー監視するプログラム</h1>
<div id="text"></div>
</body>
</html>
send.php
<?php
header("Content-type: text/plain; charset=UTF-8"); //テキスト形式で返す
/**
* 注意！
* UTF-8 BOMなしで保存してください
*/
if (isset($_GET['request']))
{
//HTMLを起動したままで、ここのOKという文字列の値を変えるとHTML側でメッセージが出る
echo "OK";
}
else
{
echo 'The parameter of "request" is not found.';
}
?>
