$.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
}
