jQueryから定期的にCakePHP2.0のControllerにアクセス

CakePHP2.0で作成したアプリケーションを、一定時間(1秒)ごとにアクセスしたい場合、jQueryのjQuery.get関数とsetInterval関数を使用し、CakePHP2のviewにjQueryの呼び出し手順を設定します。

動作環境

• cakephp-2.5.2
• jQuery-2.1.1

一定時間(1秒)ごとのアクセスに使用するjQueryの関数

一定時間(1秒)ごとのアクセスのために使用するjQueryの関数を次に示します。

jQuery.get( url, data, callback )

HTTP(GET)通信でページを読み込みます。シンプルなGETリクエストを送ります。

url:

読み込むHTMLページのURL

data:

キーと値の組み合わせ

callback:

通信成功時のコールバック関数

戻り値:

XMLHttpRequestオブジェクト

setInterval(Function,Interval)

特定の関数を、指定した間隔で繰り返し呼び出します。

Function:

関数名。 クォーテーションが必要です。

Interval:

関数を呼び出す時間間隔。単位はミリ秒になります。

CakePHPのviewからのjQueryの呼び出し

jQueryの呼び出しのためにviewを設定します。具体的にはviewフォルダの viewファイルとLayouts\default.ctpを次のように変更します。

jQueryファイルは/webroot/js ディレクトリに設置しておきます。

view – app\View\Sessions\index.ctp

<!--?php $this--->Html->scriptStart(array('inline' => false)); ?>
setInterval(function(){
	$.get("http://localhost/cake/page", { name: "John", time: "2pm" } );
},1000);
<!--?php $this--->Html->scriptEnd(); ?>

「this->Html->scriptStart」と「$this->Html->scriptEnd 」の二つのメソッドで、出力をいったんバッファしてプロパティに退避させ、それを後で出力します。この二つのメソッドの間にjQueryのコードを記述すると、scriptタグとして展開されて出力されます。上記のjQueryコードでは、PageControllerのアクションindexが１秒ごとに定期的に呼び出されます。

View – app\View\Layouts\default.ctp

	<!--?php echo $this--->Html->charset(); ?>
		<?php echo $cakeDescription ?>:

	<!--?php 		echo $this--->Html->meta('icon');
		echo $this->Html->css('cake.generic');
		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->Html->script('jquery-2.1.1.min.js');　←ここに挿入する
		echo $this->fetch('script');	?>

Htmlヘルパーを使用して、「echo $this->Html->script(‘jquery-2.1.1.min.js’)」を上記のように挿入します。

上記の設定が、htmlに展開されると次のようになります。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		CakePHP: the rapid development php framework:
		Sessions
		<link href="/cake/session/favicon.ico" rel="icon" type="image/x-icon" />
		<link href="/cake/session/favicon.ico" rel="shortcut icon" type="image/x-icon" />
		<link href="/cake/session/css/cake.generic.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="/cake/session/js/jquery-2.1.1.min.js"></script>　←ここで設置される
		<script type="text/javascript">
// <![CDATA[　←ここから展開される
		setInterval(function(){
		$.get("http://localhost/cake/session/sessions", { name: "John", time: "2pm" } ); },1000);
// ]]></script>

　　注：上記は見やすくするために、改行コードを挿入しています。