IT

Ajax通信 サーバー側で生成された現在時刻を表示する

$.ajaxメソッドを利用したAjax通信で、サーバー側で生成された現在時刻を表示を試します。

 

○PHP

<?php
print date('H時i分s秒');

現在時刻を取得するためのコード

○HTML
 <!DOCTYPE html>
<html>
<head>
<title>サーバー側で生成された現在時刻を表示する</title>
</head>
<body><form>
<input type="button" id="btn" value="現在時刻" />
<div id="result"></div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
// ボタンクリック時に現在時刻を表示
$('#btn').click(function() {
// current.phpから現在時刻を取得
$.ajax('ajTime.php',
{
type: 'get',
dataType: 'text',
cache: false
}
)
// 取得した現在時刻を出力
.done(function(data) {
$('#result').text(data);
});
});
});
</script>

</body>
</html>

これで【現在時刻】ボタンを押すたびに時刻が更新されて表示されます。

このコードをChrome、Firefoxなどのブラウザから動作させた場合は問題ありませんが、
IEだとボタンを何度クリックしても時刻は更新されません。これはIEがAjax通信の結果をキャッシュしてしまうために起きてしまいます。

このような現象を回避するには、cacheパラメーターに明示的にfalseを指定すれば、キャッシュが無効化され、IEのブラウザでも時刻が表示されます。

$.ajax('ajTime.php',
{
type: 'get',
dataType: 'text',
cache: false
}

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*