最近よく利用するリアルタイム表示について説明します。
まずはJavaScriptのソース。
<script type="text/javascript"> $(document).ready(function (){ setInterval(function() { $.ajax({ type: 'GET', url: '/check.php', cache: false, dataType: 'text', success: function(data) { document.getElementById('after').style.display = "block"; $('#after_detail').html(data); }, error: function() { alert("読み込み失敗"); } }); }, 3000); }); </script>
そしてHTMLのソース。
<div id="after" style="display:none"> 結果は<div id="after_detail"></div>です。 </div>
では以下説明を簡単に。
$(document).ready(function (){ ・ ・ ・ });
こちらでページが読み込まれたら処理させるように。
setInterval(function() { ・ ・ ・ }, 3000);
こちらで3秒毎に処理を走らせるように。
type: 'GET', url: '/check.php', cache: false, dataType: 'text',
こちらで3秒毎に処理を実行する内容を記述。
この場合は、
“/check.phpにGETでアクセスしプレーンテキスト形式の応答を受け取る”
といった内容になります。(キャッシュには保存しない)
success: function(data) { document.getElementById('after').style.display = "block"; $('#after_detail').html(data); },
こちらで、正常時の処理を記述します。
この場合は、
“該当エレメント(after)の表示をONにし、該当エレメント(after_detail)に戻り値を表示”
といった内容になります。
error: function() { alert("読み込み失敗"); }
こちらで失敗時に実行する内容を記述。
この場合は、
“ウィンドウアラートを表示”
になります。
この機能は今後もいろいろと活躍しそうですね。