javascriptの非同期通信(AJAX)とphpで実装する現在時刻

現在時刻をphpで取得し、その情報をjavascriptの非同期通信で1秒間隔で取得し、画面に表示させます。

1.phpのdate関数で現在時刻を取得する

現在時刻はphpで取得します。javascriptでも現在時刻の取得はできますが、各ユーザーの端末の時刻設定に依存してしまうので、サーバーの時刻設定を取得するphpを使用します。
適当なファイルに現在時刻取得用のプログラムを記述します。このファイルがjavascriptからの非同期通信先になります。date関数で時刻を取得し、json形式に変換しechoしてあげます。こんな感じです。

$time = date("H:i:s");
echo json_encode($time);

							

2.表示用のHTMLマークアップを用意する

javascriptからphpファイルへの非同期通信の前に画面表示用のHTMLを用意します。javascriptからアクセスできればどのようなものでも大丈夫です。マークアップしてあるidに対してjavascriptから出力を行います。

<time id="timeArea"></time>

							

3.javascriptからphpファイルに非同期通信(AJAX)を行いhtmlマークアップ先へ1秒感覚で出力する

非同期通信でphpファイルから時刻を取得する関数式を、setInterval関数を使って1秒間隔で発生させて取得した時刻を画面表示用のHTMLマークアップへ出力します。

const getTimePromise = function(){
	return new Promise(function(resolve,reject){
		$.ajax({
			url      : "example.php",
			type     : "POST",
			cache    : false,
			dataType : "json",
			data     : {example: "example"}
		}).done(function(data,textStatus,jqXHR){
			resolve(data);
		}).fail(function( jqXHR, textStatus, errorThrown ){
		}).always(function( data, textStatus, errorThrown ){
		});
	});
};