jQuery & Ajax通信を使ってPHPから取得した値をタイマーで監視するサンプル

jQuery

jQueryのajaxメソッドを使ってタイマーで5秒毎にAjax通信を行ってPHPから返される値を監視するサンプルです。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

ブラウザの実行結果


途中でsend.php内の「OK」という文字を変更して保存するとHTML上にメッセージを出すようにしています。send.phpでDBからデータを取得し、返すという風にも出来るかと思います。

ちょっとsend.phpをいじらないと動作を確認できない作りにしてしまったのでサンプル配布しておきます><;

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.';
}
?>
  

共有やブックマークなど